/* ============================================================
   USTAR ACADEMY — TOKENS
   Source of truth for prototype AND theme_ustar/scss/_tokens.scss
   a11y-corrected build (audit 2026-08-16): green-600 #2D8F5B->#277C4F (4.52:1),
     orange-700 #C2610F->#A8540C (4.76:1), ink-500 #8A8781->#706D6A (5.14:1 white, 4.71:1 canvas),
     ink-450 = decorative only, border-interactive added (light #767370 / dark .42 white).
   Measured from real brand assets:
     #FBC502 / #282727  ← hozmagia-wordmark.png pixel sample
   ============================================================ */

:root {
  /* ---------- PRIMITIVES · warm neutral ----------
     a11y fix (doc 13 §1): ink-500 darkened #8A8781→#767370 (4.71:1 on white);
     old value kept as ink-450 — DECORATIVE GRAPHICS ONLY, never text. */
  --u-ink-1000:#1B1A19; --u-ink-900:#282727; --u-ink-800:#35332F;
  --u-ink-700:#4A4845;  --u-ink-600:#6B6864; --u-ink-500:#706D6A;
  --u-ink-450:#8A8781;
  --u-ink-400:#A9A69E;  --u-ink-300:#C9C6BE; --u-ink-200:#DFDCD4;
  --u-ink-100:#EDEBE5;  --u-ink-050:#F6F5F1; --u-white:#FFFFFF;

  /* ---------- PRIMITIVES · brand ---------- */
  --u-brand-700:#B98F00; --u-brand-600:#E0AE00; --u-brand-500:#FBC502;
  --u-brand-400:#FFD53D; --u-brand-300:#FFE071; --u-brand-200:#FFECA8;
  --u-brand-100:#FFF6D6;
  --u-amber-500:#FC9617; --u-sky-500:#5CA3D4; --u-sky-700:#35688F;

  /* ---------- PRIMITIVES · semantic hues ---------- */
  --u-green-600:#277C4F; --u-green-300:#6FCF97; --u-green-100:#E4F4EB;
  --u-orange-700:#A8540C;--u-orange-300:#F0A868;--u-orange-100:#FDF0E3;
  --u-red-700:#B42318;   --u-red-300:#F08078;   --u-red-100:#FDECEA;
  --u-blue-700:#35688F;  --u-blue-300:#8FC3E6;  --u-blue-100:#E8F1F8;
  --u-gap-700:#7A5AA8;   --u-gap-300:#B79EDB;   --u-gap-100:#F1ECF8;

  /* ---------- SPACE · 4px step ---------- */
  --u-s-1:4px;  --u-s-2:8px;  --u-s-3:12px; --u-s-4:16px; --u-s-5:20px;
  --u-s-6:24px; --u-s-8:32px; --u-s-10:40px;--u-s-12:48px;--u-s-16:64px;
  --u-s-20:80px;
  --u-density:1;

  /* ---------- RADIUS ---------- */
  --u-r-xs:4px; --u-r-sm:8px; --u-r-md:12px; --u-r-lg:16px;
  --u-r-xl:22px; --u-r-full:999px;

  /* ---------- ELEVATION ---------- */
  --u-e-0:none;
  --u-e-1:0 1px 2px rgba(40,39,39,.05);
  --u-e-2:0 4px 14px -6px rgba(40,39,39,.14);
  --u-e-3:0 12px 34px -12px rgba(40,39,39,.20);

  /* ---------- TYPE ---------- */
  --u-font-ui:"Inter","Segoe UI",system-ui,-apple-system,Arial,sans-serif;
  --u-font-disp:"Inter Tight",var(--u-font-ui);
  --u-font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Consolas,monospace;

  --u-fs-display:clamp(30px,4vw,40px);
  --u-fs-h1:clamp(24px,3vw,30px);
  --u-fs-h2:21px;  --u-fs-h3:17px;   --u-fs-title:15px;
  --u-fs-body:15px;--u-fs-body-lg:17px;
  --u-fs-small:13px;--u-fs-caption:12px;--u-fs-label:12px;--u-fs-eyebrow:11px;
  --u-fs-numeric:clamp(26px,3.4vw,34px);

  --u-lh-tight:1.12; --u-lh-snug:1.28; --u-lh-base:1.6; --u-lh-loose:1.7;
  --u-fw-regular:420;--u-fw-medium:520;--u-fw-semi:600;
  --u-fw-strong:640; --u-fw-bold:700;
  --u-measure:68ch;  --u-measure-lg:72ch;

  /* ---------- MOTION ---------- */
  --u-dur-fast:120ms; --u-dur-standard:200ms;
  --u-dur-slow:320ms; --u-dur-page:380ms;
  --u-ease-out:cubic-bezier(.22,1,.36,1);
  --u-ease-inout:cubic-bezier(.4,0,.2,1);
  --u-ease-in:cubic-bezier(.4,0,1,1);

  /* ---------- LAYOUT ---------- */
  --u-container:1180px; --u-container-hr:1520px;
  --u-rail-w:232px; --u-rail-w-mini:68px;
  --u-topbar-h:60px; --u-bottomnav-h:62px;

  /* ---------- Z ---------- */
  --u-z-sticky:100;--u-z-rail:200;--u-z-topbar:300;--u-z-dropdown:400;
  --u-z-drawer:500;--u-z-modal:600;--u-z-overlay:700;--u-z-toast:800;
  --u-z-tooltip:900;

  /* ---------- COMPONENT ---------- */
  --u-btn-h:44px; --u-btn-h-sm:36px; --u-btn-px:16px;
  --u-input-h:44px; --u-card-p:var(--u-s-5);
  --u-step-h:64px; --u-step-dot:22px; --u-step-line-w:2px;
}

/* ============================================================
   SEMANTIC · LIGHT (default)
   ============================================================ */
:root,
[data-theme="light"] {
  color-scheme: light;

  --u-canvas:linear-gradient(168deg,#F8F7F3 0%,#F4F2EC 100%);
  --u-canvas-flat:#F6F5F1;
  --u-surface:var(--u-white);
  --u-surface-raised:var(--u-white);
  --u-surface-muted:var(--u-ink-050);
  --u-surface-sunken:var(--u-ink-100);
  --u-surface-inverse:var(--u-ink-900);
  --u-surface-glass:rgba(255,254,250,.78);
  --u-surface-glass-strong:rgba(255,254,250,.92);

  --u-text-primary:var(--u-ink-900);
  --u-text-secondary:var(--u-ink-600);
  --u-text-muted:var(--u-ink-500);
  --u-text-inverse:var(--u-white);
  --u-text-brand:#8A6A00;
  /* Yellow AS TEXT is allowed ONLY on ink-900/inverse surfaces (9.28:1).
     Never resolves onto light surfaces; linted separately. */
  --u-text-brand-on-ink:var(--u-brand-500);
  --u-text-link:var(--u-blue-700);

  --u-border:var(--u-ink-200);
  --u-border-strong:var(--u-ink-300);
  --u-border-subtle:var(--u-ink-100);
  --u-border-glass:rgba(40,39,39,.09);
  --u-border-focus:var(--u-blue-700);
  --u-border-interactive:#706D6A;

  --u-brand:var(--u-brand-500);
  --u-brand-hover:var(--u-brand-600);
  --u-brand-on:var(--u-ink-900);
  --u-brand-soft:var(--u-brand-100);
  --u-accent:var(--u-amber-500);

  --u-success-bg:var(--u-green-100); --u-success-fg:var(--u-green-600);
  --u-warning-bg:var(--u-orange-100);--u-warning-fg:var(--u-orange-700);
  --u-danger-bg:var(--u-red-100);    --u-danger-fg:var(--u-red-700);
  --u-info-bg:var(--u-blue-100);     --u-info-fg:var(--u-blue-700);
  --u-gap-bg:var(--u-gap-100);       --u-gap-fg:var(--u-gap-700);

  --u-state-completed:var(--u-green-600);
  --u-state-current:var(--u-brand-500);
  --u-state-available:var(--u-ink-600);
  --u-state-locked:var(--u-ink-400);
  --u-state-optional:var(--u-ink-500);
  --u-state-overdue:var(--u-red-700);
  --u-state-gap:var(--u-gap-700);
  --u-progress-track:var(--u-ink-100);
  --u-progress-fill:linear-gradient(90deg,#FBC502 0%,#FC9617 100%);

  --u-glass-blur:22px; --u-glass-saturate:135%;
  --u-glass-hilite:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,0) 42%);
  --u-glass-shadow:0 8px 28px -14px rgba(40,39,39,.22);

  --u-focus-ring:0 0 0 2px var(--u-surface),0 0 0 4px var(--u-border-focus);
  --u-skeleton-a:var(--u-ink-100);
  --u-skeleton-b:var(--u-ink-050);
}

/* ============================================================
   SEMANTIC · DARK — rebuilt, not inverted
   Layered warm charcoal. Never pure #000.
   ============================================================ */
[data-theme="dark"] {
  color-scheme: dark;

  --u-canvas:linear-gradient(168deg,#1B1A19 0%,#171615 100%);
  --u-canvas-flat:#1B1A19;
  --u-surface:#232120;
  --u-surface-raised:#2A2827;
  --u-surface-muted:#1E1D1C;
  --u-surface-sunken:#151414;
  --u-surface-inverse:var(--u-ink-050);
  --u-surface-glass:rgba(34,33,32,.72);
  --u-surface-glass-strong:rgba(34,33,32,.90);

  --u-text-primary:#F1EFE9;
  --u-text-secondary:#B5B1A9;
  --u-text-muted:#928E87;
  --u-text-inverse:var(--u-ink-1000);
  --u-text-brand:var(--u-brand-400);
  --u-text-link:var(--u-blue-300);

  --u-border:rgba(255,255,255,.10);
  --u-border-strong:rgba(255,255,255,.18);
  --u-border-subtle:rgba(255,255,255,.06);
  --u-border-glass:rgba(255,255,255,.10);
  --u-border-focus:var(--u-blue-300);
  --u-border-interactive:rgba(255,255,255,.42);

  --u-brand:var(--u-brand-500);
  --u-brand-hover:var(--u-brand-400);
  --u-brand-on:var(--u-ink-900);
  --u-brand-soft:rgba(251,197,2,.14);
  --u-accent:var(--u-orange-300);

  --u-success-bg:rgba(39,124,79,.18); --u-success-fg:var(--u-green-300);
  --u-warning-bg:rgba(168,84,12,.20); --u-warning-fg:var(--u-orange-300);
  --u-danger-bg:rgba(180,35,24,.20);  --u-danger-fg:var(--u-red-300);
  --u-info-bg:rgba(53,104,143,.22);   --u-info-fg:var(--u-blue-300);
  --u-gap-bg:rgba(122,90,168,.22);    --u-gap-fg:var(--u-gap-300);

  --u-state-completed:var(--u-green-300);
  --u-state-current:var(--u-brand-500);
  --u-state-available:#B5B1A9;
  --u-state-locked:#605C57;
  --u-state-optional:#928E87;
  --u-state-overdue:var(--u-red-300);
  --u-state-gap:var(--u-gap-300);
  --u-progress-track:rgba(255,255,255,.09);

  --u-glass-blur:24px; --u-glass-saturate:118%;
  --u-glass-hilite:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,0) 38%);
  --u-glass-shadow:0 10px 32px -14px rgba(0,0,0,.55);

  --u-e-1:0 1px 2px rgba(0,0,0,.30);
  --u-e-2:0 4px 14px -6px rgba(0,0,0,.45);
  --u-e-3:0 12px 34px -12px rgba(0,0,0,.60);

  --u-focus-ring:0 0 0 2px var(--u-surface),0 0 0 4px var(--u-border-focus);
  --u-skeleton-a:rgba(255,255,255,.07);
  --u-skeleton-b:rgba(255,255,255,.03);
}

/* ---------- DENSITY ---------- */
[data-density="compact"]     { --u-density:.75; }
[data-density="comfortable"] { --u-density:1; }

/* ---------- GLASS DISABLED (admin setting / weak device) ---------- */
html[data-glass="off"] body .u-glass,
html[data-glass="off"] body .u-glass-strong {
  background: var(--u-surface-raised);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}