/* ==========================================================================
   UI/UX Pro Max — Token layer
   Load before base.css and before any component CSS.
   Components consume SEMANTIC tokens only. Primitives are never used directly.
   ========================================================================== */

:root {

    /* ---------- PRIMITIVES: neutral ramp ---------------------------------- */
    --n-0:    #ffffff;
    --n-25:   #fcfcfd;
    --n-50:   #f7f8fa;
    --n-100:  #eef0f4;
    --n-200:  #e0e3ea;
    --n-300:  #c8cdd8;
    --n-400:  #9aa2b1;
    --n-500:  #6f7788;
    --n-600:  #545b6b;
    --n-700:  #3d434f;
    --n-800:  #272c36;
    --n-900:  #191d25;
    --n-950:  #0f1218;

    /* ---------- PRIMITIVES: accent — Athena (sampled from the brand artwork) */
    --a-50:   #e6f8fd;
    --a-100:  #c2effa;
    --a-200:  #8adff5;
    --a-300:  #47cbec;
    --a-400:  #00c2dc;
    --a-500:  #00a6d3;
    --a-600:  #0877e1;
    --a-700:  #0b5cc4;
    --a-800:  #0d489c;
    --a-900:  #0d3877;

    /* ---------- PRIMITIVES: semantic hues ---------------------------------- */
    --ok-50:   #e8f7ee;  --ok-500:   #17915a;  --ok-700:   #0f6b42;
    --warn-50: #fef4e4;  --warn-500: #c47a09;  --warn-700: #96590a;
    --err-50:  #fdeceb;  --err-500:  #cf3a30;  --err-700:  #9d2a23;
    --info-50: #e9f2fb;  --info-500: #2472bd;  --info-700: #1a5490;

    /* ---------- SEMANTIC: surfaces (light content area) -------------------- */
    --bg-page:        var(--n-50);
    --bg-surface:     var(--n-0);
    --bg-raised:      var(--n-0);
    --bg-sunken:      var(--n-100);
    --bg-hover:       var(--n-100);
    --bg-active:      var(--n-200);
    --bg-selected:    var(--a-50);
    --bg-disabled:    var(--n-100);
    --bg-scrim:       rgba(15, 18, 24, 0.55);

    /* ---------- SEMANTIC: surfaces (dark navigation shell) ----------------- */
    --shell-bg:          var(--n-950);
    --shell-bg-raised:   var(--n-900);
    --shell-hover:       rgba(255, 255, 255, 0.06);
    --shell-active:      rgba(255, 255, 255, 0.10);
    --shell-border:      rgba(255, 255, 255, 0.09);
    --shell-text:        #d7dbe3;
    --shell-text-muted:  #8b93a3;
    --shell-text-strong: #ffffff;
    --shell-group-label: #8b93a3;  /* 6.07:1 on the shell background */

    /* ---------- SEMANTIC: text -------------------------------------------- */
    --text-strong:    var(--n-900);
    --text-default:   var(--n-800);
    --text-muted:     #5d6472;   /* 5.95:1 white, 5.60:1 --bg-page, 5.21:1 on a hovered row */
    --text-subtle:    var(--n-400);
    --text-inverse:   var(--n-0);
    --text-link:      var(--a-700);  /* 6.28:1 on white */
    --text-link-hover:var(--a-700);
    --text-disabled:  var(--n-400);

    /* ---------- SEMANTIC: borders ----------------------------------------- */
    --border-subtle:  var(--n-200);
    --border-default: var(--n-300);
    --border-strong:  var(--n-400);
    --border-accent:  var(--a-500);

    /* ---------- SEMANTIC: accent ------------------------------------------ */
    --accent:         var(--a-500);
    --accent-hover:   var(--a-600);
    --accent-active:  var(--a-700);
    --accent-soft:    var(--a-50);
    --accent-on:      var(--n-0);

    /* ---------- SEMANTIC: status ------------------------------------------ */
    --ok-bg:   var(--ok-50);   --ok-fg:   var(--ok-700);   --ok-line:   var(--ok-500);
    --warn-bg: var(--warn-50); --warn-fg: var(--warn-700); --warn-line: var(--warn-500);
    --err-bg:  var(--err-50);  --err-fg:  var(--err-700);  --err-line:  var(--err-500);
    --info-bg: var(--info-50); --info-fg: var(--info-700); --info-line: var(--info-500);

    /* ---------- TYPE ------------------------------------------------------- */
    --font-ui:   "Inter", -apple-system, "Segoe UI", system-ui, sans-serif;
    --font-body: "Roboto", "Inter", -apple-system, "Segoe UI", system-ui, sans-serif;
    --font-mono: "Roboto Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

    --fs-display: 2rem;      --lh-display: 2.5rem;
    --fs-h1:      1.5rem;    --lh-h1:      2rem;
    --fs-h2:      1.1875rem; --lh-h2:      1.75rem;
    --fs-h3:      1rem;      --lh-h3:      1.5rem;
    --fs-body:    0.875rem;  --lh-body:    1.3125rem;
    --fs-sm:      0.8125rem; --lh-sm:      1.1875rem;
    --fs-xs:      0.6875rem; --lh-xs:      1rem;

    --fw-regular: 400;
    --fw-medium:  500;
    --fw-semi:    600;
    --fw-bold:    700;
    --ls-caps:    0.06em;

    /* ---------- SPACE (4px base) ------------------------------------------ */
    --space-1:  0.25rem;
    --space-2:  0.5rem;
    --space-3:  0.75rem;
    --space-4:  1rem;
    --space-6:  1.5rem;
    --space-8:  2rem;
    --space-12: 3rem;
    --space-16: 4rem;

    /* ---------- RADIUS ----------------------------------------------------- */
    --radius-sm:   4px;
    --radius-md:   6px;
    --radius-lg:   10px;
    --radius-pill: 999px;

    /* ---------- ELEVATION -------------------------------------------------- */
    --shadow-sm: 0 1px 2px rgba(15, 18, 24, 0.06);
    --shadow-md: 0 2px 8px rgba(15, 18, 24, 0.08);
    --shadow-lg: 0 8px 28px rgba(15, 18, 24, 0.14);

    /* ---------- LAYOUT ----------------------------------------------------- */
    --sidebar-w:           260px;
    --sidebar-w-collapsed: 64px;
    --topbar-h:            56px;
    --content-max:         1100px;
    --page-gutter:         var(--space-6);

    /* ---------- CONTROLS ---------------------------------------------------- */
    --control-h:          38px;
    --control-h-sm:       32px;
    --control-h-touch:    44px;
    --row-h:              44px;
    --row-h-compact:      36px;
    --field-border:       var(--border-default);
    --field-bg:           var(--n-0);

    /* ---------- FOCUS ------------------------------------------------------- */
    --focus-ring:       0 0 0 2px var(--n-0), 0 0 0 4px var(--accent);
    --focus-ring-dark:  0 0 0 2px var(--shell-bg), 0 0 0 4px var(--a-300);

    /* ---------- MOTION ------------------------------------------------------ */
    --dur-micro:  120ms;
    --dur-base:   200ms;
    --dur-overlay:280ms;
    --ease-out:   cubic-bezier(0.4, 0, 0.2, 1);
    --ease-in:    cubic-bezier(0.4, 0, 1, 1);


    /* ---------- PRIMITIVES: Athena navy ground ---------------------------- */
    --nv-950: #01070f;
    --nv-900: #030c1c;
    --nv-850: #050f26;
    --nv-800: #08162f;
    --nv-750: #0c1e3d;
    --nv-700: #12294f;
    --nv-600: #1b3865;

    /* ---------- SEMANTIC: brand ------------------------------------------- */
    --brand-cyan:      #00c2dc;
    --brand-cyan-lift: #47cbec;
    --brand-blue:      #0877e1;
    --brand-blue-deep: #0b5cc4;
    --brand-gradient:  linear-gradient(102deg, var(--brand-blue) 0%, #00a6d3 58%, var(--brand-cyan) 100%);
    --brand-gradient-soft: linear-gradient(102deg, rgba(8,119,225,.16) 0%, rgba(0,194,220,.16) 100%);
    --paper:           #f1f0f0;

    /* ---------- SEMANTIC: dark marketing surfaces -------------------------- */
    --dk-bg:        var(--nv-900);
    --dk-bg-deep:   var(--nv-950);
    --dk-panel:     rgba(255,255,255,.035);
    --dk-panel-2:   rgba(255,255,255,.06);
    --dk-line:      rgba(255,255,255,.10);
    --dk-line-soft: rgba(255,255,255,.06);
    --dk-text:      #d9e0ec;
    --dk-text-mute: #9aa6bb;
    --dk-text-strong: #ffffff;
    --dk-text-faint:  #7d8ba2;   /* 3.45:1 from white, so an inline link stays distinguishable */
    --dk-placeholder: #6c7789;
    --dk-ok-fg:       #8fe0b8;
    --dk-ok-strong:   #b9f0d4;
    --dk-err-fg:      #f5aca6;
    --dk-err-line:    #f19a94;

    /* ---------- Marketing type scale (larger than the console scale) ------- */
    --ms-display: clamp(2.6rem, 1.35rem + 4.4vw, 4.5rem);
    --ms-h2:      clamp(1.75rem, 1.05rem + 2.3vw, 2.6rem);
    --ms-h3:      clamp(1.15rem, .96rem + .62vw, 1.4rem);
    --ms-lead:    clamp(1rem, .95rem + .28vw, 1.1875rem);

    --section-y:  clamp(3.5rem, 2rem + 5.5vw, 6.5rem);
    --shell-max:  1240px;

    /* ---------- Z-INDEX ----------------------------------------------------- */
    --z-sticky:  100;
    --z-drawer:  200;
    --z-scrim:   300;
    --z-modal:   400;
    --z-toast:   500;
    --z-tooltip: 600;
}

/* Dark content mode — opt in with data-theme="dark" on <html>.
   Only semantic tokens are reassigned; components need no changes. */
[data-theme="dark"] {
    --bg-page:      var(--n-950);
    --bg-surface:   var(--n-900);
    --bg-raised:    var(--n-800);
    --bg-sunken:    #0b0e13;
    --bg-hover:     rgba(255, 255, 255, 0.05);
    --bg-active:    rgba(255, 255, 255, 0.09);
    --bg-selected:  rgba(79, 133, 240, 0.16);
    --bg-disabled:  var(--n-800);

    --text-strong:  #f2f4f8;
    --text-default: #dde1e9;
    --text-muted:   #98a0b0;
    --text-subtle:  #6f7788;
    --text-link:    var(--a-300);
    --text-link-hover: var(--a-200);
    --text-disabled:#5b6373;

    --border-subtle:  rgba(255, 255, 255, 0.08);
    --border-default: rgba(255, 255, 255, 0.14);
    --border-strong:  rgba(255, 255, 255, 0.24);

    --accent:       var(--a-400);
    --accent-hover: var(--a-300);
    --accent-soft:  rgba(79, 133, 240, 0.14);

    --field-bg:     var(--n-800);
    --focus-ring:   0 0 0 2px var(--bg-page), 0 0 0 4px var(--a-300);

    --ok-bg:   rgba(23, 145, 90, 0.16);   --ok-fg:   #6ddba3;
    --warn-bg: rgba(196, 122, 9, 0.16);   --warn-fg: #f0bc63;
    --err-bg:  rgba(207, 58, 48, 0.16);   --err-fg:  #f19a94;
    --info-bg: rgba(36, 114, 189, 0.16);  --info-fg: #85bdf0;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 8px 28px rgba(0, 0, 0, 0.6);
}