/* ==========================================================================
   Northdeck design tokens — the ONLY place colours, type, space and motion
   are defined. Components reference these names; they never use raw values.
   Themes override the colour block under [data-theme="…"] (see THEMING.md).
   ========================================================================== */

:root,
[data-theme="night"] {
  color-scheme: dark;

  /* ---- Colour: ground, ink, one accent ---- */
  --ground: #060913;          /* page background */
  --surface: #0b1020;         /* one step up: panels, tiles */
  --surface-2: #10172a;       /* two steps: panel headers, control columns */
  --surface-3: #18213a;       /* three steps: secondary buttons, selected tabs */
  --hover: #222c48;           /* hover fill for surface-3 things */
  --ink: #e6eaf2;             /* all running text */
  --muted: #9aa3b5;           /* secondary notes only (≥4.5:1 on ground) */
  --faint: #5f6880;           /* inactive display-size text only (large) */
  --accent: #5eead4;          /* aurora teal: the action, the stage, the dot */
  --accent-strong: #8af0e0;   /* accent hover */
  --accent-ink: #03211c;      /* text on accent */
  --stage: var(--accent);     /* the cut-corner stage behind hero fragments */
  --mark-tile: var(--ink);    /* footer wordmark tile */

  /* ---- Interface fragments ([data-ui]) ---- */
  --ui-line: #1d2640;         /* row dividers inside product panels */
  --ui-border: #27314d;       /* control borders inside product panels */
  --ui-border-hover: #3a4668;
  --ui-ok-bg: #0f2a2a;        /* "Running" pill */
  --ui-warn: #febc2e;         /* "Restarting", spinners */
  --ui-warn-bg: #2d2610;

  /* ---- Terminal ---- */
  --term-bg: #0b1020;
  --term-bar: #121a30;
  --term-text: #a7b0c2;
  --term-dim: #7e889c;
  --term-dir: #7dd3fc;

  /* ---- Brand assets that change with the theme ---- */
  --logo-on-ground: url("brand/svg/northdeck-wordmark-dark.svg");
}

:root {
  /* ---- Type: five steps, one family; the code face is for real code only ---- */
  --font: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-code: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace; /* taste-skill-ignore: code only */
  --t-display: clamp(44px, 5.6vw, 84px);
  --t-h2: clamp(32px, 3.4vw, 50px);
  --t-lead: clamp(19px, 1.45vw, 22px);
  --t-body: 17px;
  --t-small: 14px;

  /* ---- Frame ---- */
  --m: clamp(20px, 4vw, 48px);           /* the one pair of page margins */
  --max: 1320px;
  --gap: 24px;
  --bleed: max(var(--m), calc((100vw - var(--max)) / 2 + var(--m)));
  --section: clamp(120px, 14vw, 200px);  /* gap between sections */
  --nav-h: 72px;

  /* ---- Shape: page elements are square; product fragments keep small radii ---- */
  --r-page: 0;
  --r-ui: 8px;
  --r-ui-lg: 12px;

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --t-press: 140ms;
  --t-hover: 180ms;
  --t-ui: 240ms;
  --t-reveal: 800ms;
  --t-open: 1200ms;

  /* ---- Legacy aliases (assets/brand/index.html still uses these) ---- */
  --line: var(--ui-line);
  --dim: var(--muted);
  --radius: var(--r-ui-lg);
}