/* ==========================================================================
   Tokens — Engineering Index, dark-only.
   Three layers: primitive (raw values) → semantic (intent) → component
   (per-component, references semantic only). No light theme, no
   prefers-color-scheme block — this is a single committed dark look,
   grounded to the wireframe film so video sections bleed into the page.

   Fonts — system stacks only, no webfont load in this direction.
   ========================================================================== */

/* ==========================================================================
   LAYER 1 — PRIMITIVES
   Raw values. No meaning. Nothing here references anything else.
   ========================================================================== */
:root {
  /* Carbon scale — the ground */
  --carbon-950: #050507;
  --carbon-900: #0A0B0C;
  --carbon-850: #101113;
  --carbon-800: #131416;
  --carbon-700: #1B1D1F;
  --carbon-600: #262A2D;
  --carbon-500: #3A3F43;
  --carbon-300: #86898C;
  --carbon-100: #C9CBCC;
  --carbon-050: #EDEDEC;

  /* Amber scale — the one accent */
  --amber-600: #8F5A0E;
  --amber-500: #C9902F;
  --amber-400: #DCA845;
  --amber-300: #EBC078;

  /* Type scale — 1.25 ratio, rem-based, 16px root. 56px is the ceiling:
     this direction earns authority from structure, not scale. */
  --size-xs: 0.8125rem;   /* 13px */
  --size-sm: 0.875rem;    /* 14px */
  --size-md: 1rem;        /* 16px */
  --size-lg: 1.25rem;     /* 20px */
  --size-xl: 1.5625rem;   /* 25px */
  --size-2xl: 1.9375rem;  /* 31px */
  --size-3xl: 2.4375rem;  /* 39px */
  --size-4xl: 3rem;       /* 48px */
  --size-5xl: 3.5rem;     /* 56px — ceiling, nothing exceeds this */

  /* Font stacks */
  --font-sans: system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, monospace;

  /* Space scale — 4px base */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 40px;
  --space-8: 48px;
  --space-9: 64px;
  --space-10: 96px;
  --space-11: 128px;

  /* Shape / structure primitives */
  --radius-sm: 2px;
  --radius-none: 0;   /* nothing in this system exceeds 2px */
  --hairline: 1px;
  --grid-max: 1360px;
}

/* ==========================================================================
   LAYER 2 — SEMANTIC
   Intent. References layer 1 only. This is the layer a theme would swap —
   there is only one theme here, so this is also the permanent theme.
   ========================================================================== */
:root {
  /* Surfaces */
  --surface-void: var(--carbon-950);    /* deepest falloff, hero corners */
  --surface-page: var(--carbon-900);    /* the page ground — matches the film */
  --surface-plate: var(--carbon-850);   /* technical drawing panels */
  --surface-raised: var(--carbon-800);  /* cards */
  --surface-sunken: var(--carbon-700);

  /* Borders */
  --border-hairline: var(--carbon-600); /* grid lines, column rules */
  --border-strong: var(--carbon-500);
  --border-interactive: var(--carbon-300); /* UI component boundary — meets 3:1 (WCAG 1.4.11) against page and sunken surfaces */

  /* Text */
  --text-primary: var(--carbon-050);
  --text-secondary: var(--carbon-300);
  --text-inverse: var(--carbon-950);    /* on amber fills */
  --text-accent: var(--amber-500);

  /* Accent */
  --accent: var(--amber-500);
  --accent-hover: var(--amber-400);
  --accent-muted: var(--amber-600);
  --focus-ring: var(--amber-400);

  /* Type roles — size + rhythm paired per role.
     Display/heading: tight, sans. Body: relaxed, sans.
     Label/data: mono, uppercase-ready, wide tracking. */
  --type-display-size: var(--size-5xl);
  --type-display-line: 1.1;
  --type-display-tracking: -0.02em;
  --type-display-font: var(--font-sans);

  --type-heading-size: var(--size-2xl);
  --type-heading-line: 1.1;
  --type-heading-tracking: -0.02em;
  --type-heading-font: var(--font-sans);

  --type-body-size: var(--size-md);
  --type-body-line: 1.65;
  --type-body-tracking: normal;
  --type-body-font: var(--font-sans);

  --type-label-size: var(--size-xs);
  --type-label-line: 1.65;
  --type-label-tracking: 0.16em;
  --type-label-font: var(--font-mono);

  --type-data-size: var(--size-sm);
  --type-data-line: 1.65;
  --type-data-tracking: 0.16em;
  --type-data-font: var(--font-mono);
}

/* ==========================================================================
   LAYER 3 — COMPONENT TOKENS
   Per-component. References layer 2 only — a component must never reach
   past this layer to a primitive.
   ========================================================================== */
:root {
  /* site-header */
  --header-bg: var(--surface-page);
  --header-border: var(--border-hairline);
  --header-fg: var(--text-primary);
  --header-height: var(--space-9);

  /* nav-link */
  --nav-link-fg: var(--text-secondary);
  --nav-link-fg-hover: var(--text-primary);
  --nav-link-fg-current: var(--text-primary);
  --nav-link-underline-current: var(--accent);

  /* btn — primary + quiet */
  --btn-bg: var(--accent);
  --btn-fg: var(--text-inverse);
  --btn-bg-hover: var(--accent-hover);
  --btn-bg-active: var(--accent-muted);
  --btn-quiet-border: var(--border-interactive);
  --btn-quiet-fg: var(--text-primary);
  --btn-quiet-bg-hover: var(--surface-raised);
  --btn-radius: var(--radius-sm);
  --btn-padding-x: var(--space-5);
  --btn-padding-y: var(--space-3);

  /* eyebrow */
  --eyebrow-fg: var(--text-secondary);
  --eyebrow-accent-fg: var(--text-accent);

  /* part-ref */
  --part-ref-fg: var(--text-secondary);
  --part-ref-border: var(--border-hairline);

  /* section (12-col grid wrapper) */
  --section-bg: var(--surface-page);
  --section-rule: var(--border-hairline);
  --section-max-width: var(--grid-max);
  --section-gap: var(--space-5);
  --section-divider: var(--border-hairline);

  /* spec-rail */
  --rail-fg: var(--text-secondary);
  --rail-border: var(--border-hairline);
  --rail-width: 4fr; /* columns 9–12 of a 12-col track */

  /* plate-card */
  --plate-bg: var(--surface-plate);
  --plate-border: var(--border-hairline);
  --plate-tick: var(--border-strong);
  --plate-schematic-stroke: var(--accent);
  --plate-dimension-fg: var(--text-secondary);
  --plate-radius: var(--radius-sm);
  --plate-padding: var(--space-5);

  /* stat-tile */
  --stat-figure-fg: var(--text-primary);
  --stat-label-fg: var(--text-secondary);

  /* quick-link */
  --quick-link-border: var(--border-hairline);
  --quick-link-bg-hover: var(--surface-raised);
  --quick-link-fg: var(--text-primary);

  /* data-table */
  --table-border: var(--border-hairline);
  --table-header-fg: var(--text-secondary);
  --table-row-fg: var(--text-primary);
  --table-row-bg-hover: var(--surface-raised);
  --table-cell-padding-x: var(--space-4);
  --table-cell-padding-y: var(--space-3);

  /* film-section */
  --film-bg: var(--surface-void);
  --film-caption-fg: var(--text-primary);
  --film-caption-bg: var(--surface-page);

  /* draft-banner */
  --draft-bg: var(--surface-plate);
  --draft-border: var(--accent-muted);
  --draft-fg: var(--text-accent);

  /* hero h1 — documented exception to the --size-5xl (56px) ceiling.
     See COMPONENT-SPECS.md "Exceptions". */
  --hero-h1-size: clamp(2.75rem, 6vw, 5rem);

  /* breadcrumb */
  --breadcrumb-border: var(--border-hairline);
  --breadcrumb-fg: var(--text-secondary);
  --breadcrumb-fg-current: var(--text-primary);
  --breadcrumb-fg-hover: var(--text-primary);

  /* page-hero (interior pages — no bg, no scrim, no glow) */
  --page-hero-fg: var(--text-primary);
  --page-standfirst-fg: var(--text-secondary);

  /* data-table (see also §11 table tokens above, table-scroll adds these) */
  --table-scroll-border: var(--border-interactive);
  --table-scroll-fade: linear-gradient(to right, transparent, var(--surface-page));
  /* caps a key/value table's width independent of the section grid, so a
     short-string table does not stretch to the full 1310px content column
     and read half-empty. table-layout stays auto: the browser still
     distributes this capped width by content, which keeps multi-column
     tables (4 cols) proportionate too. */
  --table-max-width: 720px;

  /* form */
  --form-label-fg: var(--text-secondary);
  --form-input-bg: var(--surface-sunken);
  --form-input-border: var(--border-interactive);
  --form-input-fg: var(--text-primary);
  --form-input-placeholder-fg: var(--text-secondary);
  --form-hint-fg: var(--text-secondary);
  --form-error-fg: var(--accent);
  --form-error-border: var(--accent);
  --form-required-fg: var(--accent);
  --form-checkbox-border: var(--border-interactive);

  /* callout */
  --callout-bg: var(--surface-plate);
  --callout-border: var(--border-hairline);
  --callout-border-accent: var(--accent-muted);
  --callout-label-fg: var(--text-secondary);
  --callout-fg: var(--text-primary);

  /* media-plate */
  --media-plate-bg: var(--surface-void);
  --media-plate-border: var(--border-hairline);
  --media-plate-caption-fg: var(--text-secondary);

  /* footer-credentials */
  --footer-credentials-border: var(--border-hairline);
  --footer-credentials-key-fg: var(--text-secondary);
  --footer-credentials-value-fg: var(--text-primary);

  /* footnote */
  --footnote-marker-fg: var(--text-accent);
  --footnote-fg: var(--text-secondary);
  --footnote-border: var(--border-hairline);

  /* btn--compact */
  --btn-compact-padding-x: var(--space-4);
  --btn-compact-padding-y: var(--space-2);
}