/* ==========================================================================
   zlogic — unified design tokens (shared across every station/page).

   ONE palette, two themes:
     - data-theme="dark"  → the index.html "cyber" look (black + neon green/cyan/pink)
     - data-theme="light" → the docs "hybrid" look (white + cyan/pink/purple)

   Canonical names are --accent-* and the structural tokens below. Legacy names
   used by older rules (--neon-*, --cyan, --pink, --violet, --matrix-green …) are
   kept as ALIASES so home.css / docs.css need minimal edits. Add new colors as
   --accent-* and alias if a component still reads an old name.
   ========================================================================== */

@font-face {
  font-family: "JetBrains Mono";
  src: url("/shared/vendor/fonts/jetbrains-mono-400.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/shared/vendor/fonts/jetbrains-mono-500.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/shared/vendor/fonts/jetbrains-mono-700.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- Theme-independent tokens ---------- */
:root {
  --mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
  --sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    "Helvetica Neue", Arial, sans-serif;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;

  --space-xs: clamp(8px, 2vw, 12px);
  --space-sm: clamp(12px, 3vw, 16px);
  --space-md: clamp(20px, 4vw, 32px);
  --space-lg: clamp(40px, 8vw, 80px);

  --theme-transition: background-color 0.25s ease, color 0.2s ease,
    border-color 0.2s ease, box-shadow 0.2s ease;
}

/* ==========================================================================
   DARK = cyber (default). Matches index.html.
   ========================================================================== */
:root,
:root[data-theme="dark"] {
  color-scheme: dark;

  /* canonical accents */
  --accent-green: #00ff41;
  --accent-cyan: #05d9e8;
  --accent-pink: #ff2a6d;
  --accent-purple: #b537f2;
  --accent-yellow: #f9f871;

  /* surfaces / structure */
  --bg: #000000;
  --bg-soft: #050505;
  --surface-soft: rgba(255, 255, 255, 0.025);
  --surface: rgba(255, 255, 255, 0.04);
  --surface-strong: rgba(255, 255, 255, 0.06);
  --panel-bg: rgba(0, 0, 0, 0.72);
  --panel-bg-strong: rgba(0, 0, 0, 0.9);

  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.16);
  --line-faint: rgba(255, 255, 255, 0.04);
  --line-dashed: rgba(255, 255, 255, 0.08);

  /* text */
  --heading: #ffffff;
  --text: #e0e0ff;
  --text-soft: rgba(224, 224, 255, 0.78);
  --text-dim: #8a8aa8;
  --text-faint: #555;

  /* semantic accent slots used by docs.css */
  --cyan: var(--accent-cyan);
  --cyan-soft: #34e3a6;
  --cyan-fill: var(--accent-cyan);
  --cyan-on: #08111c;
  --pink: var(--accent-pink);
  --violet: var(--accent-purple);
  --win: #4aa3ff;
  --mac: #cfa4ff;
  --nix: #ffb872;

  --eyebrow-bg: rgba(5, 217, 232, 0.06);
  --eyebrow-border: rgba(5, 217, 232, 0.32);
  --eyebrow-glow: 0 0 22px rgba(5, 217, 232, 0.12);
  --hero-title-shadow: 0 0 28px rgba(5, 217, 232, 0.16);

  /* background layers */
  --orb-cyan: rgba(5, 217, 232, 0.55);
  --orb-pink: rgba(255, 42, 109, 0.42);
  --orb-blur: 90px;
  --grid-line: rgba(255, 255, 255, 0.04);
  --bg-radial: radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 90%);
  --vignette: radial-gradient(ellipse at center, transparent 0%, rgba(0, 0, 0, 0.85) 100%);

  /* code */
  --code-bg: #002240;
  --code-fg: #cfeafd;
  --code-border: rgba(255, 255, 255, 0.06);
  --inline-code-bg: rgba(5, 217, 232, 0.14);
  --inline-code-border: rgba(5, 217, 232, 0.2);
  --inline-code-fg: #b6eaff;
  --code-tag-bg: rgba(5, 217, 232, 0.12);
  --table-head-bg: rgba(255, 255, 255, 0.04);

  /* shadows */
  --shadow-soft: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 8px 28px rgba(0, 0, 0, 0.4);
  --shadow-lift: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 16px 48px rgba(0, 0, 0, 0.5);
  --preview-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), 0 0 80px rgba(5, 217, 232, 0.12);

  --hover-tint: rgba(5, 217, 232, 0.04);
  --primary-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 12px 26px rgba(5, 217, 232, 0.32);
  --primary-shadow-hover: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 14px 32px rgba(5, 217, 232, 0.5);
  --bubble-shadow: 0 8px 22px rgba(5, 217, 232, 0.2);

  /* chrome (nav/footer) */
  --chrome-nav-bg: rgba(0, 0, 0, 0.92);
  --chrome-nav-border: rgba(5, 217, 232, 0.3);
  --chrome-footer-bg: rgba(0, 0, 0, 0.7);
  --chrome-footer-border: rgba(5, 217, 232, 0.3);

  /* legacy aliases (home.css + old rules) */
  --matrix-green: var(--accent-green);
  --neon-pink: var(--accent-pink);
  --neon-cyan: var(--accent-cyan);
  --neon-purple: var(--accent-purple);
  --neon-yellow: var(--accent-yellow);
  --border-cyan: var(--eyebrow-border);
  --border-pink: rgba(255, 42, 109, 0.3);
  --border-purple: rgba(181, 55, 242, 0.3);
}

/* ==========================================================================
   LIGHT = docs hybrid palette (white / pink / purple).
   ========================================================================== */
:root[data-theme="light"] {
  color-scheme: light;

  --accent-green: #0e9f6e;
  --accent-cyan: #0891b2;
  --accent-pink: #db2777;
  --accent-purple: #8b5cf6;
  --accent-yellow: #a16207;

  --bg: #fafbfd;
  --bg-soft: #f4f6fa;
  --surface-soft: #ffffff;
  --surface: #ffffff;
  --surface-strong: #ffffff;
  --panel-bg: rgba(255, 255, 255, 0.76);
  --panel-bg-strong: rgba(255, 255, 255, 0.94);

  --line: rgba(15, 20, 25, 0.08);
  --line-strong: rgba(15, 20, 25, 0.16);
  --line-faint: rgba(15, 20, 25, 0.04);
  --line-dashed: rgba(15, 20, 25, 0.12);

  --heading: #0f1419;
  --text: #1f2933;
  --text-soft: #3c4654;
  --text-dim: #5b6573;
  --text-faint: rgba(15, 20, 25, 0.42);

  --cyan: var(--accent-cyan);
  --cyan-soft: #14b8a6;
  --cyan-fill: var(--accent-cyan);
  --cyan-on: #ffffff;
  --pink: var(--accent-pink);
  --violet: var(--accent-purple);
  --win: #2563eb;
  --mac: #8b5cf6;
  --nix: #f97316;

  --eyebrow-bg: rgba(8, 145, 178, 0.08);
  --eyebrow-border: rgba(8, 145, 178, 0.32);
  --eyebrow-glow: 0 8px 22px rgba(8, 145, 178, 0.12);
  --hero-title-shadow: none;

  --orb-cyan: rgba(139, 92, 246, 0.16);
  --orb-pink: rgba(219, 39, 119, 0.14);
  --orb-blur: 110px;
  --grid-line: rgba(15, 20, 25, 0.05);
  --bg-radial: radial-gradient(ellipse 80% 60% at 50% 0%, #000 25%, transparent 92%);
  --vignette: radial-gradient(ellipse at center, transparent 0%, rgba(15, 20, 25, 0.06) 100%);

  /* code blocks stay dark for IDE feel — reads well on light bg */
  --code-bg: #002240;
  --code-fg: #cfeafd;
  --code-border: rgba(15, 20, 25, 0.16);
  --inline-code-bg: rgba(8, 145, 178, 0.12);
  --inline-code-border: rgba(8, 145, 178, 0.2);
  --inline-code-fg: #0e7490;
  --code-tag-bg: rgba(8, 145, 178, 0.1);
  --table-head-bg: rgba(15, 20, 25, 0.03);

  --shadow-soft: 0 1px 2px rgba(15, 20, 25, 0.05), 0 8px 24px rgba(15, 20, 25, 0.06);
  --shadow-lift: 0 4px 12px rgba(15, 20, 25, 0.06), 0 24px 48px rgba(15, 20, 25, 0.08);
  --preview-shadow: 0 30px 80px rgba(15, 20, 25, 0.12), 0 0 60px rgba(8, 145, 178, 0.1);

  --hover-tint: rgba(8, 145, 178, 0.04);
  --primary-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset, 0 8px 20px rgba(8, 145, 178, 0.24);
  --primary-shadow-hover: 0 1px 0 rgba(255, 255, 255, 0.5) inset, 0 10px 24px rgba(8, 145, 178, 0.32);
  --bubble-shadow: 0 8px 22px rgba(8, 145, 178, 0.18);

  --chrome-nav-bg: rgba(250, 251, 253, 0.86);
  --chrome-nav-border: rgba(15, 20, 25, 0.1);
  --chrome-footer-bg: transparent;
  --chrome-footer-border: rgba(15, 20, 25, 0.1);

  --matrix-green: var(--accent-green);
  --neon-pink: var(--accent-pink);
  --neon-cyan: var(--accent-cyan);
  --neon-purple: var(--accent-purple);
  --neon-yellow: var(--accent-yellow);
  --border-cyan: var(--eyebrow-border);
  --border-pink: rgba(219, 39, 119, 0.3);
  --border-purple: rgba(139, 92, 246, 0.3);
}