/* ==========================================================================
   Design tokens — change the look of the whole site from here.
   Colours are HSL channels so any of them can take an alpha:
     color: hsl(var(--brand));          solid
     background: hsl(var(--brand) / .1) 10% tint
   ========================================================================== */

:root {
  /* Brand */
  --navy-950: 228 62% 5%;    /* ops-console base, darkest sections */
  --navy-900: 226 58% 8%;    /* deep navy, headings on light */
  --navy-850: 224 52% 11%;   /* panels */
  --navy-800: 223 48% 14%;   /* raised panels */
  --navy-line: 223 40% 22%;  /* hairlines on dark */
  --brand: 222 100% 59%;     /* technology blue — primary buttons, accents on light */
  --brand-hover: 222 100% 54%;
  --signal: 187 92% 55%;     /* cyan — accents on dark */
  --ok: 158 64% 52%;
  --warn: 43 96% 56%;
  --crit: 0 91% 71%;
  --danger: 0 72% 51%;       /* error text on white (crit is too light there) */

  /* Light surfaces */
  --white: 0 0% 100%;
  --ink: 226 58% 8%;         /* text on light */
  --muted: 225 15% 42%;      /* secondary text on light */
  --border: 223 28% 90%;     /* hairlines on light */
  --secondary: 224 36% 96%;  /* tinted light background */

  /* Slate (text on dark) */
  --slate-100: #f1f5f9;
  --slate-200: #e2e8f0;
  --slate-300: #cbd5e1;
  --slate-400: #94a3b8;
  --slate-500: #64748b;
  --slate-600: #475569;
  --slate-700: #334155;

  /* Type */
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Space Grotesk", "Inter", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Layout */
  --container: 88rem;
  --gutter: 1.25rem;          /* side padding; 2rem from 768px */
  --header-h: 4rem;
  --section-y: 4rem;          /* inner pages; 6rem from 768px */
  --section-y-lg: 5rem;       /* home page; 7rem from 768px */

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --t-fast: 150ms;
}

@media (min-width: 768px) {
  :root {
    --gutter: 2rem;
    --section-y: 6rem;
    --section-y-lg: 7rem;
  }
}

/* --------------------------------------------------------------------------
   Theme scopes. Components read these variables, so the same component
   works on white and on navy. Add .theme-dark to any wrapper to flip it.
   Dark sections and .panel visuals are always dark; .panel-light is always light.
   -------------------------------------------------------------------------- */

:root,
.theme-light,
.panel-light {
  --c-heading: hsl(var(--ink));
  --c-text: hsl(var(--ink));
  --c-lead: hsl(var(--muted));
  --c-muted: hsl(var(--muted));
  --c-subtle: hsl(var(--muted));
  --c-strong: hsl(var(--ink));
  --c-line: hsl(var(--border));
  --c-kicker: hsl(var(--brand));
  --c-accent: hsl(var(--brand));
  --c-surface: hsl(var(--white));
  --c-surface-hover: hsl(var(--secondary) / 0.7);
  --c-tag-bg: hsl(var(--secondary) / 0.5);
}

.theme-dark,
.section--dark,
.site-header,
.panel {
  --c-heading: #fff;
  --c-text: var(--slate-200);
  --c-lead: rgb(203 213 225 / 0.9);
  --c-muted: var(--slate-400);
  --c-subtle: var(--slate-500);
  --c-strong: var(--slate-200);
  --c-line: hsl(var(--navy-line));
  --c-kicker: hsl(var(--signal));
  --c-accent: hsl(var(--signal));
  --c-surface: hsl(var(--navy-950));
  --c-surface-hover: hsl(var(--navy-850));
  --c-tag-bg: transparent;
  color: var(--c-text);
}