/* Design tokens — "Practical AI Operations" identity (Section 21-22).
   Kept as CSS custom properties so future theming (dashboard parity)
   can override at :root without touching component rules.

   Slice 1: EXTENDS the existing royal/light-blue token set rather than
   replacing it — every token name that existed before this change still
   exists with the same meaning (--color-bg, --color-text, --color-accent,
   etc.), so no component rule needed to change just because a token value
   moved. New categories added: technical dark anchor surfaces, elevated
   surfaces, illumination accent, grid-line texture, and status colors
   (success/warning/error), per Section 22's "possible token categories"
   list. */
:root {
  /* Brand blues (existing — values unchanged) */
  --color-royal-900: #0b1f4d;
  --color-royal-700: #143a8f;
  --color-royal-600: #1d4ed8;
  --color-royal-500: #3b6dee;
  --color-blue-200: #cfe0ff;
  --color-blue-100: #e8f0ff;
  --color-blue-50: #f5f8ff;

  /* Deep technical anchor surfaces (new — Section 22: "deep navy or
     charcoal technical anchor surfaces"). --color-navy-900 intentionally
     equals the existing --color-royal-900 value so the footer's existing
     dark background doesn't shift; --color-navy-950/800 extend darker and
     lighter around it for layering. */
  --color-navy-950: #060c1e;
  --color-navy-900: #0b1f4d;
  --color-navy-800: #12295f;

  /* Neutrals (existing — values unchanged) */
  --color-ink-900: #10182b;
  --color-ink-700: #33405c;
  --color-ink-500: #5a6a8a;
  --color-white: #ffffff;
  --color-border: #dde6fb;

  /* Semantic — light surfaces (existing names, unchanged values) */
  --color-bg: var(--color-white);
  --color-bg-alt: var(--color-blue-50);
  --color-text: var(--color-ink-900);
  --color-text-muted: var(--color-ink-500);
  --color-accent: var(--color-royal-600);
  --color-accent-strong: var(--color-royal-700);
  --color-accent-hover: var(--color-royal-900);
  --color-focus-ring: #ffb703;

  /* Semantic — new surface/elevation categories */
  --color-surface-elevated: var(--color-white);
  --color-surface-technical: var(--color-navy-950);
  --color-surface-technical-panel: var(--color-navy-900);
  --color-surface-soft-panel: var(--color-blue-50);

  /* Text/border on a technical dark surface */
  --color-text-on-dark: #eaf1ff;
  --color-text-on-dark-muted: #9fb3e0;
  --color-border-on-dark: rgba(255, 255, 255, 0.14);

  /* Restrained illumination + grid texture (Section 22/24 — subtle only) */
  --color-accent-illumination: rgba(59, 109, 238, 0.28);
  --color-border-emphasized: var(--color-royal-500);
  --color-grid-line: rgba(255, 255, 255, 0.06);
  --color-grid-line-light: rgba(11, 31, 77, 0.05);

  /* Semantic — elevation & depth (Slice 2A: "Visual Depth and Trust
     Polish" — restrained shadow/surface system). Purely additive: no
     token above is redefined, so any component that doesn't opt into
     these stays pixel-identical. */
  --color-border-subtle: rgba(11, 31, 77, 0.1);
  --color-surface-raised: #fbfcff;
  --color-surface-section-alt: var(--color-bg-alt);

  --shadow-soft: 0 1px 2px rgba(11, 31, 77, 0.05), 0 4px 10px rgba(11, 31, 77, 0.07);
  --shadow-medium: 0 2px 4px rgba(11, 31, 77, 0.08), 0 10px 24px rgba(11, 31, 77, 0.12);
  --shadow-focused-interactive: 0 14px 32px rgba(11, 31, 77, 0.18);
  --shadow-inset-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.5);

  /* Status */
  --color-success: #1a7f4b;
  --color-warning: #b45309;
  --color-error: #b3261e;

  /* Type */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-size-base: 1rem;
  --line-height-base: 1.6;

  /* Spacing scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2.5rem;
  --space-6: 4rem;

  /* Radii / motion (restrained on purpose) */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --motion-fast: 120ms;
  --motion-base: 200ms;
  --motion-slow: 900ms;

  --content-max-width: 72rem;
}