/* Light / dark theme -- the one place every color on the site lives.
   Shared by every page (index.html and every page in case-studies/).

   HOW IT WORKS
   - Every color the site draws comes from a custom property defined below.
     The light palette is on :root (it is the default, and is exactly the
     site's original colors); the dark palette overrides the same names on
     :root[data-theme="dark"]. Nothing else in the CSS holds a color value.
   - js/theme.js flips the data-theme attribute on <html> and remembers the
     choice in localStorage. A tiny inline script in every page's <head>
     re-applies the saved choice before the first paint (no flash).
   - To recolor the site, edit a value here. To add a color, add the token
     to BOTH palettes (and to the @property list, if it should fade).

   NAMING: --paper* page background; --surface cards/panels; --ink* text;
   --section-dark the navy hero / project cards (dark in BOTH themes, so
   everything drawn on them uses the --on-dark* text colors); --chart-* and
   --*-fill data marks; --on-* text that sits on a colored fill. */

/* Registering the color tokens (Chrome 85+, Safari 16.4+, Firefox 128+) is
   what lets the whole page cross-fade when the theme flips: the browser can
   interpolate a registered <color>, so one transition on <html> (see
   .theme-fading below) animates every rule that uses them -- including the
   fixed page gradient, which can't be transitioned any other way. Browsers
   without @property just switch instantly. */
@property --paper-highlight { syntax: "<color>"; inherits: true; initial-value: #f2f8fc; }
@property --paper { syntax: "<color>"; inherits: true; initial-value: #e0eef7; }
@property --paper-strong { syntax: "<color>"; inherits: true; initial-value: #cce2f0; }
@property --surface { syntax: "<color>"; inherits: true; initial-value: #ffffff; }
@property --border { syntax: "<color>"; inherits: true; initial-value: #c0c2d5; }
@property --ink { syntax: "<color>"; inherits: true; initial-value: #1c2030; }
@property --ink-soft { syntax: "<color>"; inherits: true; initial-value: #4a5163; }
@property --muted { syntax: "<color>"; inherits: true; initial-value: #61697e; }
@property --section-dark { syntax: "<color>"; inherits: true; initial-value: #111c2c; }
@property --blue { syntax: "<color>"; inherits: true; initial-value: #3f46a8; }
@property --blue-hover { syntax: "<color>"; inherits: true; initial-value: #2f3590; }
@property --blue-text { syntax: "<color>"; inherits: true; initial-value: #3f46a8; }
@property --coral { syntax: "<color>"; inherits: true; initial-value: #ed7058; }
@property --gold { syntax: "<color>"; inherits: true; initial-value: #c8a74f; }
@property --chart-ink { syntax: "<color>"; inherits: true; initial-value: #111c2c; }
@property --chart-bar { syntax: "<color>"; inherits: true; initial-value: #172945; }
@property --chart-neg { syntax: "<color>"; inherits: true; initial-value: #596069; }
@property --dark-fill { syntax: "<color>"; inherits: true; initial-value: #111c2c; }
@property --panel-tint { syntax: "<color>"; inherits: true; initial-value: #eef1f9; }
@property --code-bg { syntax: "<color>"; inherits: true; initial-value: #e0e4f2; }
@property --on-dark-subtle { syntax: "<color>"; inherits: true; initial-value: #aeb9c9; }
@property --dot-color { syntax: "<color>"; inherits: true; initial-value: rgba(28, 32, 48, 0.12); }
@property --popover-bg { syntax: "<color>"; inherits: true; initial-value: rgba(255, 255, 255, 0.75); }
@property --shadow-1 { syntax: "<color>"; inherits: true; initial-value: rgba(28, 32, 48, 0.06); }
@property --shadow-2 { syntax: "<color>"; inherits: true; initial-value: rgba(63, 70, 168, 0.06); }
@property --shadow-2b { syntax: "<color>"; inherits: true; initial-value: rgba(63, 70, 168, 0.08); }
@property --shadow-pop-1 { syntax: "<color>"; inherits: true; initial-value: rgba(28, 32, 48, 0.08); }
@property --shadow-pop-2 { syntax: "<color>"; inherits: true; initial-value: rgba(63, 70, 168, 0.14); }
@property --progress-color { syntax: "<color>"; inherits: true; initial-value: #39afee; }
@property --terminal-red { syntax: "<color>"; inherits: true; initial-value: #ff3b30; }
@property --terminal-glow-near { syntax: "<color>"; inherits: true; initial-value: rgba(255, 59, 48, 0.4); }
@property --terminal-glow-far { syntax: "<color>"; inherits: true; initial-value: rgba(255, 59, 48, 0.16); }

/* ---------------------------------------------------------------------
   LIGHT -- the default, and the site's original palette, unchanged.
   --------------------------------------------------------------------- */
:root {
  color-scheme: light;

  /* Page: the glacier-blue gradient's three stops. */
  --paper-highlight: #f2f8fc;
  --paper: #e0eef7;
  --paper-strong: #cce2f0;

  /* Cards and panels; their borders. */
  --surface: #ffffff;
  --border: #c0c2d5;

  /* Text. */
  --ink: #1c2030;
  --ink-soft: #4a5163;
  --muted: #61697e;

  /* The navy hero and project cards. Navy in both themes. */
  --section-dark: #111c2c;
  --on-dark: #f1efe8;
  --on-dark-soft: #b6bfcc;
  --on-dark-muted: #8d9bb0;
  --on-dark-subtle: #aeb9c9;

  /* Accents. --blue is for fills (bars, dots, the "Let's talk" pill, with
     white text on top); --blue-text is the same indigo used as text or a
     focus ring on the page. They are one color in light, two in dark. */
  --blue: #3f46a8;
  --blue-hover: #2f3590;
  --blue-text: #3f46a8;
  --coral: #ed7058;
  --gold: #c8a74f;
  --mint: #aac5b2;

  /* Text that sits on a colored fill. */
  --on-fill: #ffffff;
  --on-fill-2: #eef1f9;
  --on-bright: #1c2030;
  /* Text on the coral fills ("refuse" badges, coral bars). White in light; in
     dark the same coral is kept and the text goes dark so it stays readable. */
  --on-coral: #ffffff;
  --on-coral-label: #61697e; /* the axis label that sits on the coral capex bar */

  /* Data marks in the charts. */
  --chart-ink: #111c2c;
  --chart-bar: #172945;
  --chart-blue: #5d86ff;
  --chart-neg: #596069;
  --chart-up: #2f7a5b;
  --chart-down: #a83a56;
  --chart-neutral: #8a8da0;
  --dark-fill: #111c2c;
  --panel-tint: #eef1f9;
  --code-bg: #e0e4f2;

  /* Page texture, frosted popover, shadows. */
  --dot-color: rgba(28, 32, 48, 0.12);
  --popover-bg: rgba(255, 255, 255, 0.75);
  --shadow-1: rgba(28, 32, 48, 0.06);
  --shadow-2: rgba(63, 70, 168, 0.06);
  --shadow-2b: rgba(63, 70, 168, 0.08);
  --shadow-pop-1: rgba(28, 32, 48, 0.08);
  --shadow-pop-2: rgba(63, 70, 168, 0.14);

  /* Fixed in both themes: a screenshot with its white background baked in,
     and the black behind a video. */
  --image-backdrop: #ffffff;
  --media-bg: #111c2c;

  /* Scroll progress bar (css/scroll-progress.css). */
  --progress-color: #39afee;

  /* The red block cursor of the terminal-typing headline (css/terminal-text.css).
     A strong terminal red in the coral family, but purer, so it reads as a
     lit pixel next to the coral "decision.". The glow is softer in light. */
  --terminal-red: #ff3b30;
  --terminal-glow-near: rgba(255, 59, 48, 0.4);
  --terminal-glow-far: rgba(255, 59, 48, 0.16);
}

/* ---------------------------------------------------------------------
   DARK -- the same brand after dark: the glacier-blue page deepens to
   midnight navy, the indigo/coral/gold accents stay, and the colors that
   were dark-on-light (text, chart ink) flip to light-on-dark.
   --------------------------------------------------------------------- */
:root[data-theme="dark"] {
  color-scheme: dark;

  --paper-highlight: #0f1c31;
  --paper: #0a1424;
  --paper-strong: #070f1b;

  --surface: #172843;
  --border: #2e4870;

  --ink: #e7ecf4;
  --ink-soft: #b7c2d4;
  --muted: #95a2b8;

  /* One step lighter than the page, so the hero and cards read as raised. */
  --section-dark: #12233c;
  --on-dark: #f1efe8;
  --on-dark-soft: #b6bfcc;
  --on-dark-muted: #8d9bb0;
  --on-dark-subtle: #d0d8e6;

  --blue: #6068d8;
  --blue-hover: #4b53bd;
  --blue-text: #a0a8fa;
  --coral: #ed7058;
  --gold: #c8a74f;
  --mint: #aac5b2;

  --on-fill: #ffffff;
  --on-fill-2: #ffffff;
  --on-bright: #1c2030;
  --on-coral: #1c2030;
  --on-coral-label: #1c2030;

  --chart-ink: #dbe4f2;
  --chart-bar: #7396cf;
  --chart-blue: #5d86ff;
  --chart-neg: #9aa5b8;
  --chart-up: #4fbf90;
  --chart-down: #e0708c;
  --chart-neutral: #9aa0b8;
  --dark-fill: #3c5b91;
  --panel-tint: #1f3453;
  --code-bg: #223856;

  --dot-color: rgba(170, 200, 255, 0.08);
  --popover-bg: rgba(23, 40, 67, 0.78);
  --shadow-1: rgba(0, 0, 0, 0.35);
  --shadow-2: rgba(0, 0, 0, 0.3);
  --shadow-2b: rgba(0, 0, 0, 0.35);
  --shadow-pop-1: rgba(0, 0, 0, 0.4);
  --shadow-pop-2: rgba(0, 0, 0, 0.45);

  --image-backdrop: #ffffff;
  --media-bg: #111c2c;

  --progress-color: #7dd3fc;

  /* A touch brighter on the dark page, with a fuller glow. */
  --terminal-red: #ff453a;
  --terminal-glow-near: rgba(255, 69, 58, 0.6);
  --terminal-glow-far: rgba(255, 69, 58, 0.28);
}

/* Hairlines are the text color at a low opacity, so they follow the theme
   automatically (--ink is 28 32 48 in light, so this is exactly the
   original rgba(28, 32, 48, .16) and .34). */
:root {
  --rule: color-mix(in srgb, var(--ink) 16%, transparent);
  --rule-strong: color-mix(in srgb, var(--ink) 34%, transparent);
}

/* The 0.3s cross-fade. js/theme.js puts .theme-fading on <html> for a moment
   around the switch; the transition is on the custom properties themselves,
   so every color that reads them fades together. Skipped entirely for
   visitors who prefer reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  :root.theme-fading {
    transition-duration: 300ms;
    transition-timing-function: ease;
    transition-property:
      --paper-highlight, --paper, --paper-strong, --surface, --border,
      --ink, --ink-soft, --muted, --section-dark, --blue, --blue-hover,
      --blue-text, --coral, --gold, --chart-ink, --chart-bar, --chart-neg,
      --dark-fill, --panel-tint, --code-bg, --on-dark-subtle, --dot-color,
      --popover-bg, --shadow-1, --shadow-2, --shadow-2b, --shadow-pop-1,
      --shadow-pop-2, --progress-color, --terminal-red, --terminal-glow-near,
      --terminal-glow-far;
  }
}

/* ---------------------------------------------------------------------
   The toggle button: a round icon button at the right end of every header.
   Hidden until the page's <head> script has confirmed JS is running (it
   adds .has-theme-js), so a visitor without JS never sees a dead button.
   --------------------------------------------------------------------- */
.theme-toggle {
  display: none;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--rule-strong);
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background 180ms ease, border-color 180ms ease, transform 180ms ease;
  -webkit-tap-highlight-color: transparent;
}

.has-theme-js .theme-toggle { display: inline-flex; }

.theme-toggle:hover {
  border-color: var(--ink-soft);
  background: color-mix(in srgb, var(--ink) 8%, transparent);
  transform: translateY(-2px);
}

.theme-toggle:focus-visible {
  outline: 2px solid var(--blue-text);
  outline-offset: 3px;
}

.theme-toggle svg {
  display: block;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* A sun while the site is dark (click to go light); a moon while it's light
   (click to go dark). */
.theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

@media print {
  .theme-toggle { display: none !important; }
}