:root {
    /* ========= Brand / Accent ========= */
    --color-primary: oklch(58% 0.14 200);        /* teal steel */
    --color-primary-hover: oklch(50% 0.16 200);

    /* ========= Backgrounds ========= */
    --bg-primary: oklch(98% 0.002 250);         /* clean daylight canvas */
    --bg-secondary: oklch(95% 0.004 250);       /* sharp card separation */

    /* ========= Borders ========= */
    --border-primary: oklch(80% 0.006 250);
    --border-width: 1px;

    /* ========= Text ========= */
    --text-primary: oklch(20% 0.015 250);       /* crisp, ink-like */
    --text-secondary: oklch(92% 0.012 250);
    --text-muted: oklch(46% 0.01 250);

    /* ========= States ========= */
    --state-success: oklch(54% 0.13 150);
    --state-error: oklch(54% 0.18 28);
    --state-info: oklch(56% 0.14 210);

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

    /* ========= Spacing ========= */
    --space-l: 1.1rem;
    --space-s: .35rem;
    --space: .7rem;

    --space-r-l: .45rem .9rem;
    --space-r-s: .1rem .2rem;
    --space-r: .2rem .6rem;

    --space-x-l: 0.35rem 1rem;
    --space-x-s: 0.08rem .3rem;
    --space-x: 0.15rem .65rem;
}