/* ===== CARTRIDGE design system: shared tokens for the Hub, IT Academy and AI Academy =====
   Loaded FIRST on every page. The Academy is a pocket game console: bone/graphite hardware, thick ink outlines,
   hard offset shadows, dot-matrix textures, CRT screens for code, cartridge-label stripes for accents.
   Every other stylesheet uses the --k-* tokens below; the legacy names at the bottom are aliases for old inline styles. */

@font-face { font-family: "Jersey 20"; src: url("/fonts/Jersey20.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("/fonts/DMSans.woff2") format("woff2"); font-weight: 100 1000; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "DM Sans"; src: url("/fonts/DMSans-ext.woff2") format("woff2"); font-weight: 100 1000; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "DM Sans"; src: url("/fonts/DMSans-Italic.woff2") format("woff2"); font-weight: 100 1000; font-style: italic; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("/fonts/JetBrainsMono.woff2") format("woff2"); font-weight: 100 800; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "JetBrains Mono"; src: url("/fonts/JetBrainsMono-ext.woff2") format("woff2"); font-weight: 100 800; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  /* type */
  --k-display: "Jersey 20", "Trebuchet MS", ui-rounded, system-ui, sans-serif;   /* headings, buttons, labels, numbers. ONE weight: always font-weight 400, sized ~20% larger than body text */
  --k-body: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;   /* reading text */
  --k-mono: "JetBrains Mono", "Cascadia Code", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;      /* code, terminals */

  /* shape */
  --k-r: 14px;            /* panels, cartridges */
  --k-r-sm: 9px;          /* buttons, chips, inputs */
  --k-r-xs: 5px;
  --k-bw: 2px;            /* THE outline width. Everything raised has one. */
  --k-border: var(--k-bw) solid var(--k-line);
  --k-drop-lg: 6px 6px 0 var(--k-drop);     /* hero objects: cartridges, dialogs */
  --k-drop-md: 4px 4px 0 var(--k-drop);     /* panels, cards */
  --k-drop-sm: 2px 2px 0 var(--k-drop);     /* buttons, chips */

  /* fixed colours (same in both themes) */
  --k-it: #ff7a1a;        /* IT Academy: signal orange */
  --k-ai: #9d7bff;        /* AI Academy: ultraviolet */
  --k-coin: #ffc83d;      /* XP, gold, levels, primary call-to-action */
  --k-heart: #ff4f64;     /* hearts, bosses, danger fills */
  --k-leaf: #6fdc5a;      /* success fills, phosphor */
  --k-sky: #38c6f4;       /* info fills */
  --k-on-accent: #1b1920; /* text on any of the six fills above (always dark ink) */
  --k-black: #1b1920;
  --k-cream: #f4eddc;

  /* CRT screen (code blocks, terminals, editors): ALWAYS dark, in both themes */
  --k-screen: #0c120e;
  --k-screen-2: #141d17;
  --k-screen-line: #2a3a2f;
  --k-phos: #d6f5cf;       /* default screen text */
  --k-phos-dim: #7d9a80;
  --k-phos-hot: #8dff6a;   /* prompts, carets, success */
  --k-scan: repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 3px);

  /* textures */
  --k-stripes: linear-gradient(90deg, var(--k-heart) 0 20%, var(--k-it) 20% 40%, var(--k-coin) 40% 60%, var(--k-leaf) 60% 80%, var(--k-sky) 80% 100%);
  --k-brand: var(--k-coin);   /* overridden per academy below */
}
html[data-academy="it"] { --k-brand: var(--k-it); }
html[data-academy="ai"] { --k-brand: var(--k-ai); }

/* ---------- GRAPHITE (dark) ---------- */
[data-theme="dark"] {
  --k-bg: #121115;          /* the page behind everything */
  --k-chrome: #1b1a20;      /* hardware: top bar, rails, sidebars */
  --k-panel: #24222a;       /* raised cards */
  --k-inset: #2f2c37;       /* wells, hover, table stripes, inputs */
  --k-text: #f4eddc;
  --k-muted: #aaa397;
  --k-line: #f4eddc;        /* outline colour */
  --k-hair: #3d3a47;        /* quiet 1px dividers */
  --k-drop: #000000;        /* hard shadow colour */
  --k-dot: rgba(244, 237, 220, .07);
  /* accent colours when used AS TEXT / thin strokes on the theme background */
  --k-brand-text: var(--k-brand);
  --k-link: #5fd2f7;
  --k-ok: #7fe26b;   --k-ok-bg: rgba(111, 220, 90, .13);
  --k-bad: #ff6f80;  --k-bad-bg: rgba(255, 79, 100, .14);
  --k-warn: #ffc83d; --k-warn-bg: rgba(255, 200, 61, .12);
  --k-info: #5fd2f7; --k-info-bg: rgba(56, 198, 244, .12);
  --k-sys: #b9a2ff;  --k-sys-bg: rgba(157, 123, 255, .15);
  color-scheme: dark;
}
/* ---------- BONE (light) ---------- */
[data-theme="light"] {
  --k-bg: #e9e1cf;
  --k-chrome: #f4eddc;
  --k-panel: #fffaf0;
  --k-inset: #efe6d2;
  --k-text: #1b1920;
  --k-muted: #5f584d;
  --k-line: #1b1920;
  --k-hair: #cdc3ab;
  --k-drop: #1b1920;
  --k-dot: rgba(27, 25, 32, .09);
  --k-brand-text: #b44a00;
  --k-link: #0b62a8;
  --k-ok: #1c7a34;   --k-ok-bg: rgba(60, 170, 70, .16);
  --k-bad: #c2213a;  --k-bad-bg: rgba(255, 79, 100, .14);
  --k-warn: #8a5a00; --k-warn-bg: rgba(255, 200, 61, .26);
  --k-info: #0b62a8; --k-info-bg: rgba(56, 198, 244, .18);
  --k-sys: #5b36c9;  --k-sys-bg: rgba(157, 123, 255, .16);
  color-scheme: light;
}
html[data-academy="ai"][data-theme="light"] { --k-brand-text: #5b36c9; }

:root { --k-dots: radial-gradient(var(--k-dot) 1.2px, transparent 1.6px) 0 0 / 12px 12px; }

/* ---------- legacy aliases (old variable names still referenced by inline styles / scripts) ---------- */
:root { --font: var(--k-body); --mono: var(--k-mono); --radius: var(--k-r); --px: var(--k-display); --vt: var(--k-display); --gold: var(--k-coin); }
[data-theme] {
  --bg: var(--k-bg); --bg2: var(--k-chrome); --card: var(--k-panel); --card2: var(--k-inset); --border: var(--k-hair);
  --text: var(--k-text); --muted: var(--k-muted); --accent: var(--k-link); --accent2: var(--k-warn); --accent-ink: var(--k-on-accent);
  --ok: var(--k-ok); --ok-bg: var(--k-ok-bg); --bad: var(--k-bad); --bad-bg: var(--k-bad-bg);
  --warn-bg: var(--k-warn-bg); --note-bg: var(--k-info-bg); --sys-bg: var(--k-sys-bg); --sys: var(--k-sys);
  --code-bg: var(--k-screen); --code-text: var(--k-phos); --inline-code: var(--k-inset);
  --tok-kw: #ff9ecb; --tok-str: #b6f08a; --tok-num: #ffb86b; --tok-com: #7d9a80; --tok-def: #7fd6ff; --tok-builtin: #ffd866; --tok-op: #9fe8ff;
  --shadow: var(--k-drop-md);
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }