/* ---------------------------------------------------------------------------
   Brand tokens — the single place where Mission Control's colours, type and
   spacing are defined. Values come straight from the Brand Guidelines in the
   project's Branding folder. Change them here, not in the other stylesheets.
   --------------------------------------------------------------------------- */

:root {
  /* Primary palette */
  --command-navy: #0A3156;   /* headings, navigation, primary buttons */
  --control-aqua: #18BEC5;   /* progress, active states, selected controls */
  --signal-yellow: #F1E51C;  /* small moments of emphasis / next-step cues */

  /* Secondary palette */
  --deep-navy: #061F38;      /* dark surfaces, strong contrast */
  --slate: #263746;          /* body text and practical interface copy */
  --cloud: #F5F7FA;          /* page background, quiet surfaces */
  --mist: #DCE4EA;           /* borders, dividers, disabled controls */

  /* Working tints derived from the palette (kept subtle, per the guidelines) */
  --aqua-tint: #E7F9FA;
  --aqua-tint-strong: #C9F1F3;
  --yellow-tint: #FDFAD2;
  --navy-tint: #EAF0F6;
  --white: #FFFFFF;
  --muted: #6B7A88;          /* secondary label text on light surfaces */

  /* Surfaces */
  --surface: var(--white);
  --surface-quiet: var(--cloud);
  --border: var(--mist);
  --border-strong: #C6D2DC;

  /* Typography */
  --font-heading: "Sora", "Trebuchet MS", Arial, sans-serif;
  --font-body: "Inter", Arial, Helvetica, sans-serif;

  --text-xs: 0.6875rem;
  --text-sm: 0.78125rem;
  --text-base: 0.875rem;
  --text-md: 0.9375rem;
  --text-lg: 1.0625rem;
  --text-xl: 1.1875rem;
  --text-2xl: 1.375rem;
  --text-3xl: 1.625rem;

  /* Spacing scale (4px base) */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;

  /* Shape and depth — soft and calm, never decorative */
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  --shadow-card: 0 1px 2px rgba(6, 31, 56, 0.05), 0 1px 3px rgba(6, 31, 56, 0.04);
  --shadow-raised: 0 4px 16px rgba(6, 31, 56, 0.08);
  --shadow-float: 0 12px 32px rgba(6, 31, 56, 0.14);

  --focus-ring: 0 0 0 3px rgba(24, 190, 197, 0.45);

  --sidebar-width: 216px;
  /* Wide enough to use the space on a big screen, capped so lines of text
     don't run right across an ultrawide monitor. */
  --content-max: 1680px;
  --reading-max: 1100px;   /* for the wizard, where line length matters */
}