:root {
    --bg: #f7f7f8;
    --bg-elevated: rgba(255, 255, 255, .82);
    --bg-strong: #ffffff;
    --bg-soft: rgba(0, 0, 0, .04);

    --text: #0b0b0c;
    --text-strong: #000000;
    --muted: rgba(0, 0, 0, .60);
    --thin: rgba(0, 0, 0, .45);

    --border: rgba(0, 0, 0, .08);
    --border-strong: rgba(0, 0, 0, .12);

    --chip-bg: rgba(0, 0, 0, .04);
    --chip-border: rgba(0, 0, 0, .10);

    --panel-dark: rgba(10, 10, 10, .55);
    --panel-dark-strong: rgba(20, 20, 20, .92);
    --panel-dark-soft: rgba(255, 255, 255, .06);

    --white-soft: rgba(255, 255, 255, .92);
    --white-mid: rgba(255, 255, 255, .75);
    --white-thin: rgba(255, 255, 255, .60);
    --white-faint: rgba(255, 255, 255, .45);
    --white-border: rgba(255, 255, 255, .12);

    --black-soft: rgba(0, 0, 0, .04);
    --black-mid: rgba(0, 0, 0, .10);

    --shadow: 0 22px 80px rgba(0, 0, 0, .10);
    --shadow-strong: 0 30px 90px rgba(0, 0, 0, .18);
}

html[data-theme="dark"] {
    --bg: #111315;
    --bg-elevated: rgba(24, 26, 28, .88);
    --bg-strong: #181a1c;
    --bg-soft: rgba(255, 255, 255, .05);

    --text: #f3f4f6;
    --text-strong: #ffffff;
    --muted: rgba(255, 255, 255, .68);
    --thin: rgba(255, 255, 255, .46);

    --border: rgba(255, 255, 255, .10);
    --border-strong: rgba(255, 255, 255, .14);

    --chip-bg: rgba(255, 255, 255, .05);
    --chip-border: rgba(255, 255, 255, .10);

    --panel-dark: rgba(18, 20, 22, .74);
    --panel-dark-strong: rgba(18, 20, 22, .94);
    --panel-dark-soft: rgba(255, 255, 255, .07);

    --white-soft: rgba(255, 255, 255, .92);
    --white-mid: rgba(255, 255, 255, .75);
    --white-thin: rgba(255, 255, 255, .60);
    --white-faint: rgba(255, 255, 255, .45);
    --white-border: rgba(255, 255, 255, .12);

    --black-soft: rgba(255, 255, 255, .05);
    --black-mid: rgba(255, 255, 255, .10);

    --shadow: 0 22px 80px rgba(0, 0, 0, .40);
    --shadow-strong: 0 30px 90px rgba(0, 0, 0, .52);
}