/* ============================================================
   klyroni — design tokens  ·  "PHOSPHOR"
   ------------------------------------------------------------
   A competitive-programming contest console: graphite canvas,
   an electric lime/phosphor signal accent, and semantically
   distinct verdict colors (emerald AC · coral WA · amber TLE).
   Dark-first — that's where competitive programmers live — with
   a crisp "blueprint paper" light theme that shares the same hues.

   This is the SINGLE SOURCE OF TRUTH for the look. The component
   stylesheets (app.css / ide.css) only re-label these primitives
   into a working vocabulary (--ink, --surface, --line, --mono,
   --tier-*) and never hardcode a color. Change the brand here.

   Axes:  [data-theme] light|dark   [data-font] sans|serif|mono|mixed
          [data-palette] (default phosphor) amber|cyan|violet
   ============================================================ */

:root {
  /* ---- Font stacks (raw families) ----------------------------------
     Loaded in index.html via Google Fonts. If the network is down the
     stacks fall back to the platform UI / mono faces. */
  --font-sans:    "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-serif:   "Fraunces", Georgia, "Times New Roman", serif;
  --font-mono:    "JetBrains Mono", "Fira Code", ui-monospace, "SF Mono", Consolas, monospace;
  --font-display: "Chakra Petch", "Hanken Grotesk", system-ui, sans-serif;

  /* ---- Neutral ramp = the palette ANCHORS --------------------------
     Cool graphite, faintly blue. Semantic colors below cascade from
     these via var(), so a palette only overrides the accent/brand. */
  --white:        #ffffff;
  /* LIGHT anchors — fully white surfaces; structure carried by borders only. */
  --gray-050:     #ffffff;   /* page / sidebar chrome = white        */
  --gray-150:     #ffffff;   /* toolbars / panel headers = white     */
  --gray-200:     #e5e5e5;   /* border (the only structure now)      */
  --gray-300:     #c8c8c8;   /* strong border / disabled            */
  --gray-500:     #616161;   /* muted text                          */
  --black:        #1f1f1f;   /* primary text (VS Code foreground)   */
  /* DARK anchors — VS Code Dark: #1e1e1e editor, #252526 panels. */
  --near-black:   #181818;   /* page canvas (behind the editor)     */
  --gray-900:     #1e1e1e;   /* editor / base surface               */
  --gray-800:     #252526;   /* inset / sidebar tone                */
  --gray-700:     #2d2d30;   /* border (visible hairline)           */
  --gray-600:     #3c3c3c;   /* strong border                       */
  --gray-400:     #858585;   /* muted text                          */
  --near-white:   #d4d4d4;   /* primary text (VS Code editor fg)    */

  /* ---- Brand + accent (PHOSPHOR — electric lime) -------------------
     Light theme tunes the accent down to a deep lime/olive so link
     TEXT clears AA on white; the dark theme runs the full electric
     lime. Same hue family in both → one coherent brand. */
  --brand:         #4d7c0f;
  --accent:        #4d7c0f;   /* links / active nav / focus / primary fills */
  --accent-strong: #3f6212;   /* hover / pressed                            */
  --accent-soft:   #eaf6d4;   /* faint accent fill / selected               */

  /* ---- Semantic colors — cascade from the ramp (LIGHT default) ---- */
  --bg:            var(--gray-050);
  --bg-subtle:     var(--white);
  --bg-inset:      var(--gray-150);
  --fg:            var(--black);
  --fg-muted:      var(--gray-500);
  --border:        var(--gray-200);
  --border-strong: var(--gray-300);

  /* Inverted surface — tooltips and solid active states. */
  --invert-bg:     var(--black);
  --invert-fg:     var(--white);

  /* Code editor surfaces. */
  --code-bg:       var(--white);
  --code-fg:       var(--fg);
  --code-border:   var(--border);
  --code-line:     var(--gray-150);   /* line highlight / gutter rule */

  /* Focus ring — the accent, offset for visibility. */
  --focus-ring:    var(--accent);

  /* ---- Status colors (verdicts) — kept distinct from the lime accent.
     AC = emerald, WA = red, TLE/warn = amber. ---------------------- */
  --ok:        #15803d;
  --ok-bg:     #e6f6ec;
  --err:       #dc2626;
  --err-bg:    #fdecec;
  --warn:      #b45309;   /* darkened for AA as text */
  --warn-bg:   #fbf0db;
  --danger:    var(--err);   /* legacy alias used across the CSS */

  /* ---- Difficulty / rating tiers — a CP-native scale -------------- */
  --easy:      #0d9488;   /* teal   */
  --medium:    #d97706;   /* amber  */
  --hard:      #e11d48;   /* rose   */

  /* Modal scrim — a deep graphite veil behind dialogs. */
  --scrim:     rgba(8, 10, 14, 0.62);

  /* ---- Spacing scale (rem, 4px base) ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;

  /* ---- Type scale ---- */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.375rem;
  --text-2xl:  1.75rem;
  --text-3xl:  2.5rem;

  --leading-tight:  1.22;
  --leading-normal: 1.6;
  --measure: 66ch;            /* comfortable reading width */

  --weight-normal: 400;
  --weight-medium: 500;
  --weight-bold:   700;

  /* ---- Borders / radii / shadow ----------------------------------
     Crisp, engineered corners — tighter than a soft SaaS card. */
  --radius-sm: 4px;
  --radius:    7px;
  --radius-lg: 12px;
  --border-w:  1px;

  /* Soft warm shadows (matches klyroni.com) — a gentle lift for cards, popovers
     and the primary button, warm-tinted to sit on the paper surfaces. */
  --shadow-sm: 0 1px 2px rgba(40, 34, 24, 0.07);
  --shadow:    0 8px 24px rgba(40, 34, 24, 0.10);

  /* ---- Active font roles (default = sans) ---- */
  --font-body: var(--font-sans);
  --font-head: var(--font-display);
  --font-code: var(--font-mono);
}

/* ============================================================
   DARK THEME — the hero. Graphite canvas, full electric lime.
   ============================================================ */
:root[data-theme="dark"] {
  --bg:            var(--near-black);
  --bg-subtle:     var(--gray-900);
  --bg-inset:      var(--gray-800);
  --fg:            var(--near-white);
  --fg-muted:      var(--gray-400);
  --border:        var(--gray-700);
  --border-strong: var(--gray-600);

  --invert-bg:     var(--near-white);
  --invert-fg:     var(--near-black);

  --code-bg:       #1e1e1e;
  --code-fg:       var(--near-white);
  --code-border:   var(--gray-700);
  --code-line:     var(--gray-800);

  /* PHOSPHOR — the lime runs at full voltage on graphite. */
  --brand:         #c2f24a;
  --accent:        #c2f24a;
  --accent-strong: #d6ff6e;
  --accent-soft:   rgba(194, 242, 74, 0.15);

  /* Verdicts — brightened; low-alpha tints read on graphite panels. */
  --ok:        #34d399;
  --ok-bg:     rgba(52, 211, 153, 0.15);
  --err:       #fb6f70;
  --err-bg:    rgba(251, 111, 112, 0.15);
  --warn:      #fbbf3d;
  --warn-bg:   rgba(251, 191, 61, 0.14);

  /* Difficulty — brighten for the dark canvas. */
  --easy:      #2dd4bf;
  --medium:    #fbbf24;
  --hard:      #fb6f8a;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45);
  --shadow:    0 10px 28px rgba(0, 0, 0, 0.55);
}

/* ============================================================
   PALETTES — full editor themes. Unlike a simple accent swap, each
   theme below overrides the whole surface ramp (bg / surface / fg /
   border / code) for BOTH light and dark, so picking e.g. Gruvbox +
   toggling the light/dark switch gives that theme's two official
   variants. Default (no data-palette) = PHOSPHOR, defined in :root.
   Syntax colors for each live in css/ide.css.

   Each variant is scoped to its exact theme (…[data-theme="light"]
   and …[data-theme="dark"]) so values never leak across the toggle.
   ============================================================ */

/* ---- KLYRONI — the house theme: flat, matte navy-charcoal with a calm
   muted-blue accent and quiet syntax. Low-glare, easy on the eyes. ---- */
/* One uniform background everywhere: surface / bg-subtle / inset / code all ride
   the page --bg, so every panel reads as the same workspace background and the
   structure is carried by borders alone (+ a faint --code-line for the active
   row). */
:root[data-palette="klyroni"][data-theme="light"] {
  --bg: #f4f6f8; --bg-subtle: #f4f6f8; --bg-inset: #f4f6f8; --surface: #f4f6f8;
  --fg: #1f2933; --fg-muted: #5b6b7b; --border: #e1e6ea; --border-strong: #cbd3da;
  --brand: #2f6bb0; --accent: #2f6bb0; --accent-strong: #255a96; --accent-soft: #e4edf7;
  --code-bg: #f4f6f8; --code-fg: #1f2933; --code-line: #eaeef2;
}
:root[data-palette="klyroni"][data-theme="dark"] {
  --bg: #0d1117; --bg-subtle: #0d1117; --bg-inset: #0d1117; --surface: #0d1117;
  --fg: #c9d1d9; --fg-muted: #768390; --border: #1c222b; --border-strong: #2a313c;
  --brand: #6ca0e0; --accent: #6ca0e0; --accent-strong: #5a8fd0; --accent-soft: rgba(108, 160, 224, 0.15);
  --code-bg: #0d1117; --code-fg: #c9d1d9; --code-line: #161c24;
}

/* ============================================================
   FONT SELECTION — set data-font on <html>. Default = sans
   (Hanken Grotesk body · Chakra Petch display headings).
   ============================================================ */
:root[data-font="sans"] {
  --font-body: var(--font-sans);
  --font-head: var(--font-display);
}
:root[data-font="serif"] {
  --font-body: var(--font-serif);
  --font-head: var(--font-serif);
}
:root[data-font="mono"] {
  /* everything monospace — a hard "terminal" identity */
  --font-body: var(--font-mono);
  --font-head: var(--font-mono);
}
:root[data-font="mixed"] {
  /* Fraunces display headings over a grotesk body — editorial */
  --font-body: var(--font-sans);
  --font-head: var(--font-serif);
}

/* ============================================================
   Accessibility floor
   ============================================================ */
* { box-sizing: border-box; }

/* Scrollbars — blended into the background. A transparent track shows the page
   behind it, and the thumb is just a faint lift (border-strong) so the bar
   recedes into the surface instead of showing the bright OS default. Elements
   that explicitly set scrollbar-width:none stay hidden (higher specificity). */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}
*::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}
*::-webkit-scrollbar-track,
*::-webkit-scrollbar-corner {
  background: transparent;
}
*::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 8px;
  border: 3px solid transparent;
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover {
  background: var(--fg-muted);
}

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}