/* ======================================================================
   Design tokens — single source of truth for colors, spacing, type, etc.
   Imported on every page. Use via var(--token-name) in any CSS file.
   ====================================================================== */

/* ── @font-face — self-hosted brand webfonts (MAR-750, MAR-790) ────────
   Poppins → primary brand typeface (UI + headings + body).
   Orange Squash → display / logo accent face (use sparingly, large only).
   DM Sans → feature headings (design bundle: 25px SemiBold); variable
   file, one artifact covers every weight; licence in DMSans-OFL.txt.
   Relative URLs resolve under both the /static and /static_web mounts. */
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url("../assets/fonts/Poppins-Regular.ttf") format("truetype"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url("../assets/fonts/Poppins-Medium.ttf") format("truetype"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url("../assets/fonts/Poppins-SemiBold.ttf") format("truetype"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap; src: url("../assets/fonts/Poppins-Bold.ttf") format("truetype"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 800; font-display: swap; src: url("../assets/fonts/Poppins-ExtraBold.ttf") format("truetype"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 900; font-display: swap; src: url("../assets/fonts/Poppins-Black.ttf") format("truetype"); }
@font-face { font-family: "Orange Squash"; font-style: normal; font-weight: 400; font-display: swap; src: url("../assets/fonts/Orange-Squash-BF6483cfe8b2bfc.otf") format("opentype"); }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 100 1000; font-display: swap; src: url("../assets/fonts/DMSans-Variable.ttf") format("truetype"); }

:root {
  /* ─── Brand ─── */
  --mp-navy:        #0C3458;       /* primary brand */
  --mp-navy-700:    #16456e;
  --mp-navy-800:    #082941;
  --mp-cream:       #F9F4EA;       /* page background */
  --mp-accent:      #2D9C8C;       /* secondary action / link */
  --mp-accent-700:  #207f72;

  /* ─── Design 0.1 surface (MAR-777) — verbatim from the design bundle,
     docs/design/mp-design-system/tokens/{colors,spacing}.css (Figma
     518:20886). The app's --mp-navy (#0C3458) stands; the bundle's
     #003159 is the outlier and is deliberately not imported. ─── */
  /* warm grounds */
  --mp-beige:       #f3f0eb;
  --mp-beige-2:     #eae6e0;
  --mp-beige-3:     #faf9f8;
  --mp-page:        #f5f4f2;
  --mp-panel:       #f9f8f7;
  /* ink */
  --mp-ink:         #1a1d21;
  --mp-ink-2:       #1a1a1a;
  --mp-muted:       #3d434c;
  --mp-subtle:      #444444;
  /* corporate footer tagline/headings/copyright (MAR-824) — deliberately
     distinct from --mp-ink #1a1d21 and --mp-ink-2 #1a1a1a */
  --mp-footer-ink:  #121212;
  /* warm rules */
  --mp-card-border: #c6baaf;
  --mp-rule:        #e8e3dd;
  --mp-rule-light:  #eae7e2;
  --mp-rule-vertical: #d6cfc7;
  /* accent + atmosphere */
  --mp-bronze:       #af7c4f;
  --mp-bronze-hover: #c4905f;
  --mp-amber-glow:   #ffd08b;
  /* spacing / shape */
  --mp-card-radius:   16px;
  --mp-card-padding:  36px;
  --mp-radius-pill:   9999px;
  --mp-container-max: 1320px;
  --mp-section-py-lg: 150px;

  /* ─── Brand: Gold (ceremonial / admin accents) ─── */
  --mp-navy-900:    #0B1F3F;       /* marketing / admin deep navy */
  --mp-navy-marketing: #1A3A6E;
  --mp-gold:        #C5A44E;
  --mp-gold-600:    #B08D3A;
  --mp-gold-soft:   #E6D19A;
  --text-gold:      #A37B52;

  /* ─── Brand gradients ─── */
  --grad-navy:      linear-gradient(135deg, #0B1F3F, #1A3A6E);
  --grad-navy-diag: linear-gradient(160deg, #0B1F3F 0%, #1A3A6E 50%, #0B1F3F 100%);
  --grad-gold:      linear-gradient(135deg, #D4B65A, #B08D3A);

  /* ─── Surfaces ─── */
  --bg-app:         var(--mp-cream);
  --bg-surface:     #FFFFFF;
  --bg-subtle:      #F4F7FB;
  --bg-muted:       #EEF2F7;

  /* ─── Borders & dividers ─── */
  --border-light:   #EEF1F5;
  --border-default: #E5E7EB;
  --border-strong:  #D1D5DB;

  /* ─── Text ─── */
  --text-primary:   #0C3458;
  --text-secondary: #4B5563;
  --text-muted:     #6B7280;
  --text-inverse:   #FFFFFF;

  /* ─── Status (paired bg + fg + dot) — re-pigmented for the warm Design
     0.1 ground (MAR-777, SETTLED 2026-08-02). Backgrounds are SOLID hex,
     never alpha over the ground: the specimen's ~10%-alpha pills composite
     below AA on beige. Success (4.67:1) and danger (4.69:1) clear AA with
     little margin — do not darken the backgrounds or lighten the
     foregrounds without re-measuring. ─── */
  --status-success-bg:  #E8F2ED;
  --status-success-fg:  #1B7A4A;
  --status-success-dot: #26AC68;
  --status-warning-bg:  #FFEFD8;
  --status-warning-fg:  #8A5A1C;
  --status-warning-dot: #BD7B26;
  --status-danger-bg:   #F9EBEA;
  --status-danger-fg:   #C0392B;
  --status-danger-dot:  #D85D50;
  --status-neutral-bg:  #EAE6E0;
  --status-neutral-fg:  #444444;
  --status-neutral-dot: #636363;
  --status-info-bg:     #E9EDF0;
  --status-info-fg:     #0C3458;
  --status-info-dot:    #13548E;

  /* ─── Spacing scale (4px base) ─── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  32px;
  --space-8:  48px;

  /* ─── Radii ─── */
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  14px;
  --radius-xl:  20px;
  --radius-pill: 9999px;

  /* ─── Shadows (layered for depth without heaviness) ─── */
  --shadow-xs: 0 1px 2px rgba(12, 28, 52, 0.04);
  --shadow-sm: 0 1px 3px rgba(12, 28, 52, 0.06), 0 1px 2px rgba(12, 28, 52, 0.04);
  --shadow-md: 0 4px 12px rgba(12, 28, 52, 0.08), 0 1px 3px rgba(12, 28, 52, 0.04);
  --shadow-lg: 0 10px 24px rgba(12, 28, 52, 0.10), 0 2px 6px rgba(12, 28, 52, 0.05);
  --shadow-xl: 0 24px 60px rgba(11, 31, 63, 0.22), 0 8px 20px rgba(11, 31, 63, 0.12);
  --shadow-focus: 0 0 0 3px rgba(12, 52, 88, 0.20);

  /* ─── Type scale ─── */
  --font-sans: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Orange Squash", "Poppins", Georgia, serif;
  --font-feature: "DM Sans", "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* Deliberately system-only (MAR-790): ADR-021 requires a monospace stack
     for IDs and codes, not a specific face — JetBrains Mono is not
     self-hosted, so naming it anywhere is a face that never loads. */
  --font-mono: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas,
               "Liberation Mono", monospace;
  --text-xs:   12px;
  --text-sm:   13px;
  --text-base: 15px;
  --text-md:   16px;
  --text-lg:   18px;
  --text-xl:   22px;
  --text-2xl:  28px;
  --text-3xl:  34px;
  --text-4xl:  44px;
  --text-5xl:  52px;   /* marketing hero */

  /* ─── Weights, line heights, letter spacing ─────────────────────────
     Imported verbatim from the corporate design system's
     tokens/typography.css (the same extraction that produced the type
     scale above), so the whole coherent set lands rather than only the
     values a first consumer happened to need. Additive: nothing above
     this block changed. Named weights exist because CSS custom properties
     cannot be interpolated into shorthand — `font-weight: var(--fw-semibold)`
     is checkable by a reviewer in a way that a bare 600 is not. */
  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-extra:    800;
  --fw-black:    900;

  --lh-tight:   1.1;
  --lh-snug:    1.25;
  --lh-normal:  1.5;
  --lh-relaxed: 1.7;

  --ls-tight:  -0.01em;
  --ls-snug:   -0.005em;
  --ls-normal: 0;
  --ls-wide:    0.04em;

  /* ─── Motion ─── */
  --ease-out:  cubic-bezier(0.2, 0.7, 0.3, 1);
  --dur-fast:  120ms;
  --dur-base:  200ms;
  --dur-slow:  320ms;
}