/* Quantum EDGE design language: tokens.
   Source of truth: the "Quantum EDGE" design-system artifact (tokens.json).
   Light theme on :root; any element with data-theme="dark" switches to the dark values. */

:root {
  /* Ground */
  --surface: #ffffff;
  --panel: #f6f3f0;  /* warm grey, leaning toward brand orange */
  --panel-inset: #ffffff;
  --control: #efeae5;
  --line: #e0d9d3;
  --line-strong: #8f857d;

  /* Text */
  --ink: #101921;
  --ink-muted: #5c534d;

  /* Brand orange ("Burnt Orange") */
  --orange: #dc440a;
  --action: #c9400a;
  --on-action: #ffffff;
  --orange-text: #b33a0b;
  --selected: #fadbcc;

  /* On file, not used by default: copper, an alternative to orange-text for emphasis when a page has too much orange
     (tried on 30 Oct 2026 for card closing lines, running-text emphasis, and diagram captions; the owner kept it as an option).
     emphasis-large is classic copper #b87333: 3.4:1 on the panel, enough for large type only.
     emphasis is a deeper copper for small text: 5.0:1 on the panel, 5.5:1 on white.
     Alternatives tried: teal #1d6b66; cobalt #2f5bd0; cyan #0e7490; warm grey #5c534d; warm ink #1c1714. */
  --emphasis: #975a26;
  --emphasis-large: #b87333;

  /* Hardware only */
  --hardware: #1a6694;
  --hardware-soft: #d3e0ea;
  --on-hardware: #ffffff;

  /* Status */
  --success: #1a7a33;
  --error: #c81e1e;
  --on-status: #ffffff;
  --focus: #dc440a;

  /* Data (viridis), same in both themes */
  --data-1: #440154;
  --data-2: #3b528b;
  --data-3: #21918c;
  --data-4: #5ec962;
  --data-5: #fde725;
  --data-none: #c8c8c8;

  /* Type */
  --font-sans: Karla, "Century Gothic", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Source Code Pro", ui-monospace, Menlo, monospace;
  /* Weights by role: a middle ground between the original all-800 look and the light editorial scale */
  --fw-display: 700;  /* page titles, section headlines, big figures */
  --fw-title: 600;    /* card and item titles (H3) */
  --fw-ui: 700;       /* buttons, labels, kickers, links, inline emphasis */
  --fw-quiet: 500;    /* small muted text: captions, hints, legends */
  --fw-text: 400;     /* running text */

  /* Space, 4px grid */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;

  /* Corners */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 12px;
  --radius-full: 9999px;
  --radius-button: var(--radius-full);  /* pill buttons, as in the product UI (was radius-md) */
}

:not(:root)[data-theme="dark"],
:root[data-hero="fullfloor"] .hero,
:root[data-hero="fullfloor"] .site-header.on-dark {
  color-scheme: dark;
  --surface: #000000;
  --panel: #1e1e1e;
  --panel-inset: #141414;
  --control: #2a2a2a;
  --line: #333333;
  --ink: #ffffff;
  --ink-muted: #b5b5b5;
  --orange-text: #f0642a;
  --selected: #7a2d10;
  --emphasis: #d08a4e;
  --emphasis-large: #d08a4e;
  --hardware: #4a9bd6;
  --hardware-soft: #0e2638;
  --on-hardware: #101921;
  --success: #2eaa4a;
  --error: #ff5a4f;
  --on-status: #000000;
  --focus: #f0642a;
}

/* ---------- Colour roles ----------
   site.css colours elements by role, so a role can be reassigned here in one place.
   Declared on the light root and on every dark scope, so each role picks up that theme's values. */
:root,
:not(:root)[data-theme="dark"],
:root[data-hero="fullfloor"] .hero,
:root[data-hero="fullfloor"] .site-header.on-dark {
  --role-graphic: var(--orange);             /* infographic marks: bars, wires, pulses, map dots, steps */
  --role-graphic-text: var(--orange-text);   /* live or active text inside a diagram */
  --role-graphic-label: var(--orange-text);  /* captions and callouts on an infographic (copper option: var(--emphasis)) */
  --role-tile-header: var(--orange);         /* Burnt Orange, the same as the bars, so a card's header reads as connected to them */
  --role-tile-header-small: var(--orange-text); /* 13px kickers and dates: Burnt Orange is 3.9:1 on the panel, so they use the darker orange-text to reach 4.5:1 */
  --role-tile-footer: var(--orange-text);    /* a card's closing line (copper option: var(--emphasis)) */
  --role-section-label: var(--orange);       /* labels that open a section rather than a card (20px bold, so 3:1 is enough) */
  --role-heading-em: var(--orange);          /* the key phrase in a headline: Burnt Orange (copper option: var(--emphasis-large)) */
  --role-text-em: var(--orange);             /* .em in leads, quotes and titles: bold at 19px and up, so Burnt Orange passes 3:1 (copper option: var(--emphasis)) */
  --role-text-em-small: var(--orange-text);  /* .em-sm in 13-17px body copy: Burnt Orange is only 3.9-4.3:1 there, so the darker orange keeps it readable */
}