:root {
    /* ========= Brand / Accent ========= */
    --color-primary: oklch(58.5% 0.233 277.117);
    --color-primary-hover: oklch(48.1% 0.262 276.966);

    /* ========= Backgrounds ========= */
    --bg-primary: oklch(12% 0.005 285.823);     /* main canvas */
    --bg-secondary: oklch(16% 0.008 286.375);   /* cards / panels */

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

    /* ========= Text ========= */
    --text-primary: oklch(92% 0.01 258.338);    /* main readable text */
    --text-secondary: oklch(90% 0.01 258.338);  /* muted / labels */
    --text-muted: oklch(80% 0.01 258.338);    /* main readable text */

    /* ========= States ========= */
    --state-success: oklch(65% 0.16 150.069);
    --state-error: oklch(62% 0.22 27.518);
    --state-info: oklch(68% 0.18 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;
}