/* ============================================================================
   codalume.com — dark theme overlay + print styles (dark.css)
   Load AFTER site.css. No layout changes, no new component classes.

   HOW IT WORKS
   -------------
   site.css is frozen-live and stays the default. This file redefines the
   design tokens (the --vars) under html[data-theme="dark"], so every
   component that consumes tokens restyles itself. theme.js sets the
   data-theme attribute on <html> (system preference + localStorage); with
   JS disabled the attribute never appears and the site renders exactly as
   today — progressive enhancement, nothing more.

   The overlay palette is a blue-slate "midnight" ramp: slightly lighter,
   neutral-cool surfaces than the default green-tinted near-black, with an
   ink ramp tuned so the adjusted pairs still clear WCAG AA (and mostly AAA).

   CONTRAST RATIOS (computed with the WCAG 2.x relative-luminance formula)
   ------------------------------------------------------------------------
   pair                                             ratio   bar
   --text  #e8edf3 on --bg #0e1116                  16.1:1  AAA  body text
   --text  #e8edf3 on --panel #161b23               14.7:1  AAA
   --text  #e8edf3 on --panel-2 #1a2029             13.9:1  AAA
   --muted #a7b4c2 on --bg #0e1116                   9.0:1  AA   lede/body copy
   --dim   #8292a2 on --bg #0e1116                   5.9:1  AA   normal text
   --accent #41e2a0 on --bg #0e1116                 11.4:1  AAA  links/accents
   --accent #41e2a0 on --panel #161b23              10.4:1  AA   accent on card
   --accent-dim #2eb983 on --bg #0e1116              7.5:1  AA   eyebrow/keys
   --sky #6cb6ff on --bg #0e1116                     8.8:1  AA
   --amber #f2b92e on --bg #0e1116                  10.6:1  AA   warnings
   --red #f07777 on --bg #0e1116                     6.9:1  AA   errors
   --line-control #56697f vs input fill #12161d      3.2:1  >=3:1 UI boundary

   THE COMPONENT TWEAKS (the "handful" — hardcoded colors in site.css that
   tokens cannot reach; all reuse existing class names, no new classes)
   ------------------------------------------------------------------------
   body      : re-tint the fixed background glow to the overlay accent
   .terminal / .terminal__bar / .frame__body / .input, .textarea, .select
             : hardcoded #080b0d/#0c1114 fills -> token-driven surfaces so
               the lighter overlay ramp does not leave black wells behind

   PRINT
   -----
   The @media print block at the end applies in BOTH themes (it is not
   nested under [data-theme="dark"]): black-on-white tokens, header/footer
   chrome hidden, content width expanded to the full page, no shadows.
   ========================================================================== */

/* ── Token overrides ────────────────────────────────────────────────────── */
html[data-theme="dark"] {
  /* surfaces — neutral-cool midnight ramp */
  --bg: #0e1116;
  --bg-elev: #12161d;
  --panel: #161b23;
  --panel-2: #1a2029;
  --line: #232b36;
  --line-strong: #3b4a5c;
  /* interactive control boundary: 3.2:1 against input fill, 3.1:1 vs panel */
  --line-control: #56697f;

  /* ink */
  --text: #e8edf3;
  --muted: #a7b4c2;
  --dim: #8292a2;

  /* accents — brightened to hold the same ratios on the lighter ramp */
  --accent: #41e2a0;
  --accent-dim: #2eb983;
  --accent-soft: rgba(65, 226, 160, 0.1);
  --accent-glow: rgba(65, 226, 160, 0.22);
  --sky: #6cb6ff;
  --amber: #f2b92e;
  --red: #f07777;

  /* effects */
  --shadow: 0 18px 48px -28px rgba(0, 0, 0, 0.85);
}

/* ── Component tweaks (hardcoded colors in site.css, re-routed to tokens) ── */
html[data-theme="dark"] body {
  /* same layered grid, glow re-tinted to the overlay accent */
  background-image:
    radial-gradient(900px 420px at 50% -12%, rgba(65, 226, 160, 0.07), transparent 70%),
    linear-gradient(to right, rgba(255, 255, 255, 0.024) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.024) 1px, transparent 1px);
}

html[data-theme="dark"] .terminal {
  background: var(--bg);
}

html[data-theme="dark"] .terminal__bar {
  background: var(--bg-elev);
}

html[data-theme="dark"] .frame__body {
  background: var(--bg-elev);
}

html[data-theme="dark"] .input,
html[data-theme="dark"] .textarea,
html[data-theme="dark"] .select {
  background: var(--bg-elev);
}

/* ── Print — applies in both themes ─────────────────────────────────────── */
@media print {
  :root,
  html[data-theme="dark"] {
    /* black-on-white token swap; everything token-driven follows */
    /* (the html[data-theme] branch must be here too — it outranks :root) */
    --bg: #fff;
    --bg-elev: #fff;
    --panel: #fff;
    --panel-2: #f6f6f6;
    --line: #ccc;
    --line-strong: #999;
    --line-control: #666;
    --text: #111;
    --muted: #333;
    --dim: #555;
    --accent: #005c3a;   /* 8.1:1 on white — links stay readable ink */
    --accent-dim: #007a4d;
    --accent-soft: rgba(0, 0, 0, 0.06);  /* neutral tint, not green */
    --accent-glow: rgba(0, 0, 0, 0.15);
    --sky: #0a4f8f;
    --amber: #8a5a00;
    --red: #a40000;
    --shadow: none;
  }

  body {
    background: #fff;
    background-image: none;
  }

  /* the overlay re-tints body's background-image; defeat it on paper */
  html[data-theme="dark"] body {
    background-image: none;
  }

  /* hide nav/footer decoration entirely */
  .site-header,
  .site-footer,
  .nav-toggle,
  .skip-link {
    display: none;
  }

  /* content expands to the full page width */
  .wrap {
    max-width: none;
    padding-inline: 0;
  }

  .main {
    padding-block: 0;
  }

  /* no shadows anywhere on paper */
  .panel,
  .terminal,
  .feature,
  .kpi,
  .story,
  .chart,
  .frame {
    box-shadow: none;
  }

  /* embeds do not print */
  .frame__body iframe {
    display: none;
  }

  /* keep headings attached to their copy */
  h1,
  h2,
  h3,
  h4 {
    break-after: avoid;
  }
}