/* TwinCloud brand tokens – the one place the brand is defined.
 *
 * Loaded by every area: the website pages, both guides (and their gate page)
 * and the presentation. Change a value here and it changes everywhere, so a
 * change here means checking all three areas (node tools/test.mjs, then look).
 *
 * Source of truth: Figma "Visual Identity" → Design System page
 * (https://www.figma.com/design/cXmjkCgnEwSorec22rX6U3/Visual-Identity?node-id=1271-7537).
 *
 * Three layers:
 *   1. fonts           – self-hosted, never Google's CDN (privacy, see CLAUDE.md)
 *   2. palette ramps   – the Figma colour families, step 500 is the brand colour
 *   3. shared roles    – the names the pages use (--primary, --accent, …)
 * Page- and area-specific tokens (spacing, type scale, the presentation's dark
 * surfaces) stay in each page's own :root, on top of these.
 */

/* ---------- 1. fonts ---------- */
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url("../fonts/plus-jakarta-sans-variable.woff2") format("woff2");
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/manrope-variable.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-500.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-600.woff2") format("woff2");
}

:root {
  /* ---------- 2. palette ramps (Figma "Color Architecture") ---------- */
  /* Primary Navy – core identity, dark backgrounds */
  --p-100: #D1D4DA; --p-200: #A2A9B5; --p-300: #747F91; --p-400: #45546C;
  --p-500: #172947; --p-600: #122139; --p-700: #0E192B; --p-800: #09101C;
  /* Secondary Blue – digital-twin highlights, focus */
  --s-100: #D5E7F7; --s-200: #AACEEF; --s-300: #80B6E6; --s-400: #559DDE;
  --s-500: #2B85D6; --s-600: #226AAB; --s-700: #1A5080; --s-800: #113556;
  /* Accent Green – active states, success, highlights */
  --a-100: #D2F5E7; --a-200: #A4ECCF; --a-300: #77E2B7; --a-400: #49D99F;
  --a-500: #1CCF87; --a-600: #16A66C; --a-700: #117C51; --a-800: #0B5336;
  /* Warning – tempered amber */
  --w-100: #FDF1D1; --w-200: #FAE4A3; --w-300: #F8D674; --w-400: #F5C946;
  --w-500: #F3BB18; --w-600: #C29613; --w-700: #92700E; --w-800: #614B0A;
  /* Error Red */
  --e-100: #F6DBDA; --e-200: #EDB7B4; --e-300: #E3938F; --e-400: #DA6F69;
  --e-500: #D14B44; --e-600: #A73C36; --e-700: #7D2D29; --e-800: #541E1B;
  /* Brand neutrals */
  --n-ink: #1F2A33;       /* Dark Black – body text on light */
  --n-mid: #5C6B75;       /* Muted Gray – secondary text on light */
  --n-line: #DDE3E6;      /* Light Gray – borders, neutral chips */
  --n-ground: #F7FBFA;    /* BG White – page ground */
  --n-white: #FFFFFF;

  /* ---------- 3. shared roles ---------- */
  --primary: var(--p-500);
  --accent: var(--a-500);
  --ink: var(--n-ink);
  --mid: var(--n-mid);
  --border: var(--n-line);
  --ground: var(--n-ground);
  --white: var(--n-white);
  --error: var(--e-500);
  --focus-ring: var(--s-500);
  --accent-text: #0B7A4E;     /* accent darkened to AA on white – green as TEXT on light grounds */
  --label: #54688F;           /* eyebrows and muted labels on light grounds (website, guides) */
  --on-primary-soft: #E6E8EE; /* light text on --primary */
  /* dark surfaces – the deck, the gate pages, the print pieces: one step above the navy ground */
  --surface: #1C304F;
  --surface-border: #2E4366;
  --on-dark-dim: var(--p-200);  /* secondary text on navy */
  --on-dark-dimmer: #8F98A8;    /* tertiary text on navy – AA (4.5:1) even on --surface */

  --font-display: "Plus Jakarta Sans", sans-serif;
  --font-body: "Manrope", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  /* radius scale: 4 / 8 / 12 / 16 / 24 / pill (Figma "Border Radius") */
  --radius-xs: 4px;
  --radius-2xs: 8px;
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;
}