:root {
    /* ========= Brand / Accent ========= */
    --color-primary: oklch(32% 0.02 260);          /* restrained graphite */
    --color-primary-hover: oklch(26% 0.02 260);

    /* ========= Backgrounds ========= */
    --bg-primary: oklch(98% 0.001 260);            /* near-white */
    --bg-secondary: oklch(95% 0.002 260);          /* subtle separation */

    /* ========= Borders ========= */
    --border-primary: oklch(88% 0.003 260);
    --border-width: 1px;

    /* ========= Text ========= */
    --text-primary: oklch(22% 0.01 260);           /* near-black */
    --text-secondary: oklch(80% 0.008 260);        /* muted hierarchy */
    --text-muted: oklch(80% 0.01 258.338);    /* main readable text */

    /* ========= States ========= */
    --state-success: oklch(42% 0.06 150);
    --state-error: oklch(44% 0.12 30);
    --state-info: oklch(38% 0.05 260);

    /* ========= Radius ========= */
    --radius-l: .2rem;
    --radius-s: .1rem;
    --radius: .15rem;

    /* ========= Spacing ========= */
    --space-l: .7rem;
    --space-s: .25rem;
    --space: .45rem;

    --space-r-l: .25rem .7rem;
    --space-r-s: .05rem .25rem;
    --space-r: .15rem .45rem;

    --space-x-l: .15rem .7rem;
    --space-x-s: .15rem .25rem;
    --space-x: .15rem .45rem;
}