@font-face { font-family: "Barlow"; src: url("/assets/Barlow-Regular-78b7dae9.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("/assets/Barlow-SemiBold-6f8df62a.ttf") format("truetype"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("/assets/BarlowCondensed-Bold-59da9883.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }
/* Two themes from one token set.
 * Light is the :root default. Dark comes from the OS (prefers-color-scheme) unless the page says
 * data-theme="light", and from data-theme="dark" always. The public marketing pages set
 * data-theme="dark" on <html>; the back office follows the OS and a toggle that writes data-theme.
 * Colour roles: --color-accent / --color-cool are FILLS (volt, electric) with --color-*-ink on them;
 * --color-accent-text / --color-cool-text are the same hue as TEXT or icon on paper. In dark they
 * equal the fill; in light they are darker inks, because volt and electric fail as text on light paper. */
:root {
  color-scheme: light;
  --space-3xs: 2px; --space-2xs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 16px; --space-lg: 24px; --space-xl: 40px; --space-2xl: 64px; --space-3xl: 96px; --space-4xl: 144px;
  --text-xs: 0.8125rem; --text-sm: 0.875rem; --text-md: 1.0625rem; --text-lg: 1.25rem; --text-xl: 1.5625rem; --text-2xl: 1.953rem; --text-3xl: 2.441rem;
  --text-display-s: clamp(2.5rem, 4vw + 0.75rem, 4.25rem); --text-display: clamp(3rem, 4.6vw + 1rem, 6rem);
  --text-section: clamp(2.25rem, 2.6vw + 1.1rem, 4rem); --text-title: clamp(1.375rem, 0.75vw + 1rem, 1.75rem); --text-lead: clamp(1.125rem, 0.35vw + 1rem, 1.375rem);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in: cubic-bezier(0.7, 0, 0.84, 0); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro: 120ms; --dur-short: 220ms; --dur-long: 420ms;
  --container: 1440px; --gutter: 64px; --gap-columns: 32px; --section-gap-s: 120px; --section-gap: 144px; --section-gap-l: 176px;
  --z-base: 1; --z-raised: 10; --z-dropdown: 100; --z-sticky: 200; --z-sticky-nav: 300; --z-modal: 400; --z-toast: 500; --z-tooltip: 600;
  --font-display: "Barlow Condensed", "Arial Narrow", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Barlow", ui-sans-serif, system-ui, sans-serif;
  --radius-card: 20px; --radius-pill: 12px; --radius-chip: 8px; --rule-hair: 1px;
  --shadow-card: none;
  --tracking-display: -0.005em; --display-weight: 700;
  /* the QR is printed for reception: dark modules on a light plate in both themes */
  --color-qr-plate: oklch(98% 0.004 230); --color-qr-ink: oklch(18% 0.012 230);

  /* LIGHT. Paper tinted toward electric (hue 230); raised panels lighter, wells darker */
  --color-paper: oklch(97% 0.005 230); --color-paper-2: oklch(99.2% 0.003 230); --color-paper-3: oklch(93.5% 0.007 230);
  --color-ink: oklch(22% 0.015 230); --color-ink-2: oklch(36% 0.015 230); --color-muted: oklch(48% 0.015 230);
  --color-rule: oklch(88% 0.008 230); --color-rule-2: oklch(77% 0.012 230);
  /* volt: the fill stays brand volt; text and rings take a dark volt-family ink */
  --color-accent: oklch(91% 0.2 126); --color-accent-ink: oklch(20% 0.05 126); --color-accent-edge: oklch(46% 0.12 128);
  --color-accent-text: oklch(45% 0.12 128); --color-accent-soft: oklch(94.5% 0.06 126); --color-focus: oklch(48% 0.13 128);
  /* electric: same split */
  --color-cool: oklch(81% 0.13 211); --color-cool-ink: oklch(20% 0.04 211); --color-cool-text: oklch(46% 0.09 222); --color-cool-soft: oklch(95% 0.03 211);
  --color-error: oklch(50% 0.18 18); --color-bad: oklch(50% 0.18 18); --color-bad-soft: oklch(95.5% 0.025 12);
  --color-success: oklch(45% 0.12 128);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --color-paper: oklch(17% 0.01 230); --color-paper-2: oklch(21% 0.012 230); --color-paper-3: oklch(13.5% 0.008 230);
    --color-ink: oklch(96% 0.006 230); --color-ink-2: oklch(86% 0.01 230); --color-muted: oklch(73% 0.012 230);
    --color-rule: oklch(31% 0.012 230); --color-rule-2: oklch(44% 0.014 230);
    --color-accent: oklch(91% 0.2 126); --color-accent-ink: oklch(20% 0.05 126); --color-accent-edge: oklch(91% 0.2 126);
    --color-accent-text: oklch(91% 0.2 126); --color-accent-soft: oklch(29% 0.06 126); --color-focus: oklch(91% 0.2 126);
    --color-cool: oklch(81% 0.13 211); --color-cool-ink: oklch(20% 0.04 211); --color-cool-text: oklch(81% 0.13 211); --color-cool-soft: oklch(28% 0.05 211);
    --color-error: oklch(72% 0.16 12); --color-bad: oklch(72% 0.16 12); --color-bad-soft: oklch(26% 0.05 12);
    --color-success: oklch(91% 0.2 126);
  }
}
/* DARK, forced: the marketing pages and the back-office toggle. Same values as the block above. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --color-paper: oklch(17% 0.01 230); --color-paper-2: oklch(21% 0.012 230); --color-paper-3: oklch(13.5% 0.008 230);
  --color-ink: oklch(96% 0.006 230); --color-ink-2: oklch(86% 0.01 230); --color-muted: oklch(73% 0.012 230);
  --color-rule: oklch(31% 0.012 230); --color-rule-2: oklch(44% 0.014 230);
  --color-accent: oklch(91% 0.2 126); --color-accent-ink: oklch(20% 0.05 126); --color-accent-edge: oklch(91% 0.2 126);
  --color-accent-text: oklch(91% 0.2 126); --color-accent-soft: oklch(29% 0.06 126); --color-focus: oklch(91% 0.2 126);
  --color-cool: oklch(81% 0.13 211); --color-cool-ink: oklch(20% 0.04 211); --color-cool-text: oklch(81% 0.13 211); --color-cool-soft: oklch(28% 0.05 211);
  --color-error: oklch(72% 0.16 12); --color-bad: oklch(72% 0.16 12); --color-bad-soft: oklch(26% 0.05 12);
  --color-success: oklch(91% 0.2 126);
}