/* Onyx Stitch — the only file that holds colours, fonts and shape. Every other sheet and script uses var(--…).
   Skins (css/skins/<name>.css, loaded by ?skin=<name>) override the palette + type blocks. */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&family=Inter:wght@400..700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  /* palette — brand board Direction 02 */
  --ink-rgb: 23 32 45;          /* charcoal #17202D */
  --ink-2-rgb: 13 19 28;        /* deeper charcoal */
  --ink-3-rgb: 33 45 62;        /* raised charcoal */
  --paper-rgb: 245 247 252;     /* light #F5F7FC */
  --paper-2-rgb: 232 236 244;   /* light, one step down */
  --white-rgb: 255 255 255;
  --accent-rgb: 36 87 232;      /* cobalt #2457E8 */
  --accent-hi-rgb: 122 158 255; /* cobalt for small text on charcoal */
  --accent-d-rgb: 28 70 196;    /* cobalt for small text on light */
  --steel-rgb: 132 143 163;
  --signal-rgb: 255 190 60;     /* rare warm signal (stamps, warnings) */
  --ok-rgb: 46 184 120;

  /* shader + canvas colours (#rrggbb, read by js) */
  --shader-1: #070b12;
  --shader-2: #142446;
  --shader-3: #2457e8;
  --shader-4: #c9d6ff;

  /* type */
  --fd: 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --fb: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --fm: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  --fd-w: 600;           /* display weight */
  --fd-w-light: 300;     /* em inside titles */
  --fd-track: -0.035em;
  --fd-case: none;

  /* shape + layout */
  --gut: clamp(16px, 3.4vw, 56px);
  --hdr: 76px;
  --r-s: 8px;
  --r: 14px;
  --r-l: 22px;
  --cut: 38deg;          /* the brand angle (the slashes of the X) */
  --skew: -16deg;
  --max: 1440px;

  /* semantic — dark default */
  --ink: rgb(var(--ink-rgb));
  --ink-2: rgb(var(--ink-2-rgb));
  --paper: rgb(var(--paper-rgb));
  --accent: rgb(var(--accent-rgb));
  --bg-rgb: var(--ink-rgb);
  --fg-rgb: var(--paper-rgb);
  --bg: rgb(var(--bg-rgb));
  --fg: rgb(var(--fg-rgb));
  --mut: rgb(var(--fg-rgb) / .64);
  --line: rgb(var(--fg-rgb) / .14);
  --card: rgb(var(--ink-3-rgb));
  --acc-text: rgb(var(--accent-hi-rgb));
}
body[data-theme="light"], section[data-theme="light"], .is-light {
  --bg-rgb: var(--paper-rgb);
  --fg-rgb: var(--ink-rgb);
  --mut: rgb(var(--ink-rgb) / .66);
  --line: rgb(var(--ink-rgb) / .13);
  --card: rgb(var(--white-rgb));
  --acc-text: rgb(var(--accent-d-rgb));
}
section[data-theme="dark"], .is-dark {
  --bg-rgb: var(--ink-rgb);
  --fg-rgb: var(--paper-rgb);
  --mut: rgb(var(--paper-rgb) / .64);
  --line: rgb(var(--paper-rgb) / .14);
  --card: rgb(var(--ink-3-rgb));
  --acc-text: rgb(var(--accent-hi-rgb));
}
/* derived colours must be re-declared where the triplets change (custom properties resolve where declared) */
body, section[data-theme], .is-light, .is-dark, .ftr, .menu__inner {
  --bg: rgb(var(--bg-rgb));
  --fg: rgb(var(--fg-rgb));
}