:root {
    /* ========= Brand / Accent ========= */
    --color-primary: oklch(14.1% 0.005 285.823);
    --color-primary-hover: oklch(48.8% 0.243 264.376);

    /* ========= Backgrounds ========= */
    --bg-primary: oklch(98% 0.000 0.000);
    --bg-secondary: oklch(95% 0.001 286.375);

    /* ========= Borders ========= */
    --border-primary: oklch(87.2% 0.01 258.338);
    --border-width: 2px;

    /* ========= Text ========= */
    --text-secondary: oklch(98% 0.01 258.338);
    --text-primary: oklch(37.3% 0.034 259.733);
    --text-muted: oklch(80% 0.01 258.338);    /* main readable text */

    /* ========= States ========= */
    --state-success: oklch(52.7% 0.154 150.069);
    --state-error: oklch(50.5% 0.213 27.518);
    --state-info: oklch(48.8% 0.243 264.376);

    /* ========= Radius ========= */
    --radius-l: .6rem;
    --radius-s: .2rem;
    --radius: .4rem;

    /* ========= Spacing ========= */
    --space-l: 1.2rem;
    --space-s: .4rem;
    --space: .8rem;

    --space-r-l: .6rem 1rem;
    --space-r-s: .15rem .25rem;
    --space-r: .25rem .75rem;

    --space-x-l: 0.4rem 1.2rem;
    --space-x-s: 0.1rem .4rem;
    --space-x: 0.2rem .8rem;
}