/* ============================================================
   Glaucosim — Design tokens (Apple-minimal identity)
   ============================================================
   Pure white surface, near-black ink, one confident accent
   (deep electric blue). SF Pro on Apple devices, Inter
   everywhere else. Same identity as product/iop/ — the whole
   product reads as one system.
   ============================================================ */
:root {
  /* ── Type ─────────────────────────────────────────────────── */
  --font-display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', 'Segoe UI', system-ui, sans-serif;
  --font-text:    -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', 'Segoe UI', system-ui, sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, 'SF Mono', 'JetBrains Mono', Menlo, monospace;

  /* ── Surface + ink ────────────────────────────────────────── */
  --bg:           #FFFFFF;
  --bg-elev-1:    #FAFAFA;
  --bg-elev-2:    #F4F4F4;
  --bg-hover:     #F0F0F0;

  --ink:          #0A0A0A;
  --ink-2:        #4A4A4A;
  --ink-3:        #8A8A8A;
  --ink-4:        #C0C0C0;

  --border:        rgba(10, 10, 10, .07);
  --border-strong: rgba(10, 10, 10, .14);

  /* ── Accent ───────────────────────────────────────────────── */
  --accent:       #635BFF;
  --accent-hover: #4F46E5;
  --accent-active:#3F38B5;
  --accent-soft:  rgba(99, 91, 255, .10);
  --accent-ring:  rgba(99, 91, 255, .28);

  /* ── Status (data signal only) ────────────────────────────── */
  --good:        #0A8E5C;
  --good-soft:   rgba(10, 142, 92, .10);
  --warn:        #A06200;
  --warn-soft:   rgba(160, 98, 0, .10);
  --bad:         #C7322B;
  --bad-soft:    rgba(199, 50, 43, .10);

  /* ── Radii ───────────────────────────────────────────────── */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-full: 999px;

  /* ── Spacing scale (Apple 4/8 grid) ──────────────────────── */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;

  /* ── Shadows — subtle, never overstated ──────────────────── */
  --shadow-xs: 0 1px 2px rgba(10, 10, 10, .04);
  --shadow-sm: 0 1px 3px rgba(10, 10, 10, .06), 0 1px 2px rgba(10, 10, 10, .04);
  --shadow-md: 0 4px 8px rgba(10, 10, 10, .06), 0 2px 4px rgba(10, 10, 10, .04);
  --shadow-lg: 0 12px 24px rgba(10, 10, 10, .08), 0 4px 8px rgba(10, 10, 10, .04);

  /* ── Motion ──────────────────────────────────────────────── */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.4, 0, .2, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;

  /* ── Layout ──────────────────────────────────────────────── */
  --rail-w: 220px;
  --topbar-h: 56px;
  --max-content: 1100px;

  /* ── Legacy palette overrides ─────────────────────────────
     The legacy index.html / exam.html / dashboard.html and the
     v4 Bento system in core/ui.js ship their own :root with a
     mixed bag of palette tokens (navy / teal / Fraunces / oklch
     bento surfaces). Force-override every one of them here so
     any inline style or CSS rule that reads `var(--navy)` /
     `var(--brand-teal)` / `var(--bento-bg)` etc. resolves to
     the new identity. Cascade-safe: !important on a custom
     property wins regardless of declaration order. */
  --navy:        #0A0A0A !important;
  --navy-mid:    #0A0A0A !important;
  --navy-dk:     #000000 !important;
  --teal:        #635BFF !important;
  --teal-dark:   #4F46E5 !important;
  --teal-light:  #635BFF !important;
  --teal-glow:   rgba(99, 91, 255, .28) !important;
  --mint:        #E8E7FE !important;
  --mint-soft:   #F4F3FF !important;
  --cream:       #FFFFFF !important;
  --cream-soft:  #FAFAFA !important;
  --cream-deep:  #F4F4F4 !important;
  --text:        #0A0A0A !important;
  --text-2:      #4A4A4A !important;
  --text-3:      #8A8A8A !important;
  --text-muted:  #C0C0C0 !important;
  --text-invert: #FFFFFF !important;
  --muted:       #8A8A8A !important;
  --surface:     #F4F4F4 !important;
  --surface-2:   #FAFAFA !important;
  --glass:       rgba(255,255,255,.78) !important;
  --glass-border:rgba(10,10,10,.07) !important;
  --glass-dark:  rgba(10,10,10,.88) !important;
  --font-display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', 'Segoe UI', system-ui, sans-serif !important;

  /* v4 Bento aliases (core/ui.js CORE_CSS) — neutralize */
  --bg:                 #FFFFFF !important;
  --bento-bg:           #FFFFFF !important;
  --bento-surface:      #FFFFFF !important;
  --bento-surface-2:    #FAFAFA !important;
  --bento-surface-3:    #F4F4F4 !important;
  --bento-surface-dark: #0A0A0A !important;
  --bento-surface-darker:#000000 !important;
  --bento-border:        rgba(10,10,10,.07) !important;
  --bento-border-strong: rgba(10,10,10,.14) !important;
  --bento-divider:       rgba(10,10,10,.07) !important;
  --brand-navy:          #0A0A0A !important;
  --brand-navy-soft:     rgba(10,10,10,.08) !important;
  --brand-navy-mid:      #0A0A0A !important;
  --brand-navy-light:    #1A1A1A !important;
  --brand-teal:          #635BFF !important;
  --brand-teal-soft:     rgba(99, 91, 255, .10) !important;
  --brand-teal-strong:   #4F46E5 !important;
  --brand-teal-glow:     rgba(99, 91, 255, .28) !important;

  /* Status (v4) — pin to the new identity's --good/--warn/--bad */
  --clinical-pass:        #0A8E5C !important;
  --clinical-pass-soft:   rgba(10,142,92,.10) !important;
  --clinical-borderline:  #A06200 !important;
  --clinical-borderline-soft: rgba(160,98,0,.10) !important;
  --clinical-fail:        #C7322B !important;
  --clinical-fail-soft:   rgba(199,50,43,.10) !important;
  --success:              #0A8E5C !important;
  --error:                #C7322B !important;
  --info:                 #635BFF !important;
}

/* ── Reset + base ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-text);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'cv11', 'ss01', 'ss02';
}
button, input, select, textarea {
  font: inherit;
  color: inherit;
}
button { background: transparent; border: 0; padding: 0; cursor: pointer; color: inherit; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }

::selection { background: var(--accent-soft); color: var(--ink); }

*:focus { outline: none; }
*:focus-visible {
  outline: 2px solid var(--accent-ring);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}