/* ============================================================
   Design tokens — the single source of truth for all visual
   values (colors, spacing, sizes, radii, shadows, typography).
   Nothing in the app hard-codes these; components read the vars.
   Change a token here → the whole app changes.

   Layout tokens at the bottom are overridden per breakpoint in
   layout.css, which is how the app adapts from phone to desktop.
   ============================================================ */
:root {
  /* ---------- Brand & semantic colors ---------- */
  --color-brand:        #18468B;   /* Emerson blue — header, primary surfaces */
  --color-brand-dark:   #123566;
  --color-accent:       #c0392b;   /* red — primary actions, errors, markers */
  --color-accent-dark:  #a5301f;
  --color-accent-soft:  #fdecea;   /* red tint — invalid fields, badges */
  --color-success:      #2e7d32;   /* green — ready / pass */
  --color-success-soft: #e8f5e9;
  --color-warning:      #f57f17;   /* amber — pending */
  --color-warning-soft: #fff8e1;
  --color-stage-3:      #DF9B1D;   /* amber used by stage 7 */

  /* ---------- Neutrals (text / surfaces / lines) ---------- */
  --color-text:         #1a2840;   /* primary text */
  --color-text-2:       #4e5a6a;   /* secondary text */
  --color-muted:        #6a7888;   /* labels, hints */
  --color-surface:      #ffffff;   /* cards */
  --color-surface-2:    #f7f8fa;   /* inputs, subtle fills */
  --color-bg:           #f0f2f5;   /* page background */
  --color-border:       #d8dde6;
  --color-border-light: #eaecf0;

  /* ---------- Spacing scale ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* ---------- Radius ---------- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;

  /* ---------- Elevation (shadows) ---------- */
  --shadow-sm:   0 1px 3px rgba(26,40,64,.08);
  --shadow-card: 0 20px 60px rgba(26,40,64,.10);
  --shadow-modal:0 24px 70px rgba(26,40,64,.28);

  /* ---------- Typography ---------- */
  --font: 'IBM Plex Sans', Arial, sans-serif;
  --fs-xs: 11px;
  --fs-sm: 12px;
  --fs-md: 14px;
  --fs-lg: 18px;
  --fs-xl: 22px;
  --fs-2xl: 28px;
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;
  --lh-tight: 1.25;
  --lh-base:  1.5;
  --lh-loose: 1.65;

  /* ---------- Motion ---------- */
  --ease: cubic-bezier(.4, 0, .2, 1);
  --dur-fast: .18s;
  --dur-base: .3s;
  --dur-slow: .5s;

  /* ---------- Layout (mobile-first defaults; see layout.css) ----------
     --frame-h: auto on phones so content is never clipped behind a
     hidden scrollbar; a fixed canvas height only kicks in on wide screens. */
  --shell-w:      1200px;
  --shell-gutter: var(--space-4);
  --frame-h:      auto;
  --frame-pad:    var(--space-4);
  --header-h:     auto;
  --tap-target:   44px;   /* minimum comfortable touch size */
}