/* ==========================================================================
   tokens.css — SINGLE SOURCE OF TRUTH for all colors across the Learning Hub.
   Change a value here and every page that links this file updates: the hub,
   every lesson, and every reference sheet.

   PALETTE: "Obsidian + Amber + Cyan" — engineering notebook.
   - Primary brand:           Obsidian / deep navy surfaces
   - Human learning accent:   Amber  (--accent)
   - Technical/system accent: Cyan   (--accent-2)
   Indigo removed as dominant color. WCAG contrast: amber on dark --bg = 8.8:1 (AAA),
   cyan on --bg = 9.1:1 (AAA), dark amber on light --bg = 5.1:1 (AA).
   ========================================================================== */

/* ==========================================================================
   Typography tokens — theme-INDEPENDENT (font families, type scale, leading,
   tracking). Defined once on :root; the light/dark blocks below only override
   COLORS, so these persist across themes. System font stacks only — zero
   external font dependencies (no Google Fonts).
   ========================================================================== */
:root {
  --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  /* modular type scale */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-md:   1.0625rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;

  /* line-height: tight for headings, relaxed for long-form prose */
  --leading-tight:   1.2;
  --leading-snug:    1.35;
  --leading-normal:  1.6;
  --leading-relaxed: 1.75;

  /* letter-spacing: negative for large headings, wide for eyebrows/labels */
  --tracking-tight:  -0.025em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;

  /* diagrams are light/paper art (dark ink); keep a constant light backdrop in
     BOTH themes so strokes never vanish on a dark surface */
  --diagram-bg: #ffffff;

  /* dark ink for text on a filled amber surface — readable on --accent/--accent-soft
     in BOTH themes (white on amber fails WCAG AA, esp. light) */
  --on-accent: #111827;
}

/* Dark theme (default / pre-script) */
:root,
html[data-theme="dark"] {
  /* Base surfaces */
  --bg:               #0B1020;
  --bg-soft:          #111827;
  --surface:          #172033;
  --surface-elevated: #1E293B;

  /* Text */
  --text:             #E5E7EB;
  --text-muted:       #B6C0D1;
  --text-soft:        #8D98AB;

  /* Borders */
  --border:           #2B3548;
  --border-strong:    #3A465C;

  /* Primary accent: human learning / highlights */
  --accent:           #F59E0B;
  --accent-soft:      #FBBF24;
  --accent-muted:     rgba(245,158,11,.14);

  /* Secondary accent: systems / technical links */
  --accent-2:         #22D3EE;
  --accent-2-muted:   rgba(34,211,238,.12);

  /* Links */
  --link:             #38BDF8;
  --link-hover:       #7DD3FC;

  /* Semantic */
  --success:          #34D399;
  --warning:          #FBBF24;
  --danger:           #F87171;

  /* Code blocks */
  --code-bg:          #020617;
  --code-text:        #CBD5E1;

  /* Per-track accents — unified to the secondary CYAN accent: one cohesive
     "technical" identity for card icons, not a rainbow. Amber is reserved for
     true highlights. One knob each is preserved so every var(--track-*)
     reference resolves with no markup edits. */
  --track-agents:      #22D3EE;
  --track-rest:        #22D3EE;
  --track-bloom:       #22D3EE;
  --track-distributed: #22D3EE;
  --track-storage:     #22D3EE;
  --track-transactions:#22D3EE;
  --track-streaming:   #22D3EE;
  --track-applied:     #22D3EE;
  --track-context:     #22D3EE;
  --track-eval:        #22D3EE;
  --track-prodai:      #22D3EE;
  --track-aisec:       #22D3EE;
  --track-aiinfra:     #22D3EE;
  --track-domain:      #22D3EE;
  --track-advai:       #22D3EE;

  /* Migration aliases — old token names used site-wide still resolve;
     prefer the canonical names above in new code. */
  --card:  var(--surface);
  --ink:   var(--text);
  --muted: var(--text-muted);
  --line:  var(--border);
  --chip:  var(--surface-elevated);
  --good:  var(--success);
  --bad:   var(--danger);
  --warn:  var(--warning);
  --paper: var(--bg);
  --rule:  var(--border);
  --blue:  var(--track-rest);
}

/* Light theme */
html[data-theme="light"] {
  /* Base surfaces */
  --bg:               #F8FAFC;
  --bg-soft:          #F1F5F9;
  --surface:          #FFFFFF;
  --surface-elevated: #F8FAFC;

  /* Text */
  --text:             #111827;
  --text-muted:       #475569;
  --text-soft:        #64748B;

  /* Borders */
  --border:           #E2E8F0;
  --border-strong:    #CBD5E1;

  /* Primary accent */
  --accent:           #A85508;
  --accent-soft:      #F59E0B;
  --accent-muted:     rgba(168,85,8,.12);

  /* Secondary accent */
  --accent-2:         #0E7490;
  --accent-2-muted:   rgba(14,116,144,.10);

  /* Links */
  --link:             #0369A1;
  --link-hover:       #075985;

  /* Semantic */
  --success:          #059669;
  --warning:          #D97706;
  --danger:           #DC2626;

  /* Code blocks */
  --code-bg:          #0F172A;
  --code-text:        #E2E8F0;

  /* Per-track accents */
  --track-agents:      #0E7490;
  --track-rest:        #0E7490;
  --track-bloom:       #0E7490;
  --track-distributed: #0E7490;
  --track-storage:     #0E7490;
  --track-transactions:#0E7490;
  --track-streaming:   #0E7490;
  --track-applied:     #0E7490;
  --track-context:     #0E7490;
  --track-eval:        #0E7490;
  --track-prodai:      #0E7490;
  --track-aisec:       #0E7490;
  --track-aiinfra:     #0E7490;
  --track-domain:      #0E7490;
  --track-advai:       #0E7490;

  /* Migration aliases */
  --card:  var(--surface);
  --ink:   var(--text);
  --muted: var(--text-muted);
  --line:  var(--border);
  --chip:  var(--surface-elevated);
  --good:  var(--success);
  --bad:   var(--danger);
  --warn:  var(--warning);
  --paper: var(--bg);
  --rule:  var(--border);
  --blue:  var(--track-rest);
}

/* ==========================================================================
   Dark-mode chip softening. On the near-black dark surface the default mix
   reads harsh. These overrides lower chroma + dim borders in dark mode only.
   ========================================================================== */
html[data-theme="dark"] .tags .tag{
  color:color-mix(in srgb, var(--tg, var(--tc, var(--text-muted))) 60%, var(--ink));
  background:color-mix(in srgb, var(--tg, var(--tc, var(--text-muted))) 9%, transparent);
  border-color:color-mix(in srgb, var(--tg, var(--tc, var(--text-muted))) 20%, transparent);
}
html[data-theme="dark"] .ltags .lt{
  color:color-mix(in srgb, var(--lt-c, var(--text-muted)) 60%, var(--ink));
  background:color-mix(in srgb, var(--lt-c, var(--text-muted)) 9%, transparent);
  border-color:color-mix(in srgb, var(--lt-c, var(--text-muted)) 20%, transparent);
}

/* code-like elements use the mono token on every template */
code,kbd,samp,pre{font-family:var(--font-mono)}
figure img,figure svg{background:var(--diagram-bg)}

/* keyboard focus ring */
:focus-visible{outline:2px solid var(--accent); outline-offset:2px;
  box-shadow:0 0 0 4px color-mix(in srgb, var(--bg) 80%, transparent)}

/* skip-to-content link (WCAG 2.4.1 Bypass Blocks) */
.skip-link{position:absolute; left:.5rem; top:-4rem; z-index:1000;
  padding:.5rem .9rem; border-radius:8px; font:600 .9rem/1 var(--font-sans);
  background:var(--bg); color:var(--accent); border:2px solid var(--accent);
  text-decoration:none; transition:top .15s ease}
.skip-link:focus{top:.5rem}
[id="main"]{scroll-margin-top:1rem}

/* screen-reader-only */
.sr-only{position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}

/* end-of-lesson feedback widget */
.lesson-fb{display:flex; flex-wrap:wrap; align-items:center; gap:.6rem; margin:2.5rem 0 0;
  padding:.9rem 1.1rem; border:1px solid var(--line); border-radius:12px;
  background:color-mix(in srgb, var(--accent) 5%, var(--bg));
  font:600 .9rem/1.3 var(--font-sans)}
.lesson-fb-q{color:var(--ink)}
.lesson-fb-btn{cursor:pointer; font:inherit; padding:.35rem .8rem; border-radius:999px;
  border:1px solid var(--line); background:var(--bg); color:var(--ink)}
.lesson-fb-btn:hover{border-color:var(--accent); color:var(--accent)}
.lesson-fb-thanks{display:none; color:var(--accent)}
.lesson-fb.voted .lesson-fb-q,.lesson-fb.voted .lesson-fb-btn{display:none}
.lesson-fb.voted .lesson-fb-thanks{display:inline}

/* honour reduced-motion on every template */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important; animation-iteration-count:1!important;
    transition-duration:.01ms!important}
  .skip-link{transition:none}
}