/* ba — token source (SITE CHROME — British Airways public web brand)
 *
 * A concept build for the British Airways Email Designer role. This pack carries BA's
 * REAL brand tokens (Midnight Blue, Speedbird Red, Executive Club gold), captured in
 * BA/ai_cv.md. The factory's "adjacent-but-distinct" rule is deliberately OVERRIDDEN
 * here: you cannot demonstrate BA's email system in an invented airline. The override,
 * the MyliusModern -> Nunito substitution and the unaffiliated disclaimer are stated in
 * DESIGN.md. Not affiliated with or endorsed by British Airways.
 *
 * Load order on every page: system/tokens.contract.css -> THIS FILE -> system/components.css
 * -> system/portfolio.css. Components reference the SEMANTIC tokens below, never a
 * primitive, never a literal.
 *
 * Colour discipline (ai_cv do/don't): Midnight Blue is STRUCTURE, not just a CTA
 * (nav, hero, footer, primary action all share it). Speedbird Red is held to semantic
 * moments only (disruption, error, sale) and never paired with navy in one element.
 * Executive Club gold is loyalty-only. Every pair below is annotated with its measured
 * WCAG contrast ratio; every shipped pair clears AA.
 *
 * Font: MyliusModern is proprietary and unlicensed, so Nunito (self-hosted) stands in
 * (fonts/fonts.css). Substitution flagged, not silently shipped.
 */

/* Self-hosted faces (bundled woff2). @import must precede all rules. */
@import url("../fonts/fonts.css");

:root {
  /* ============================================================
     1. PRIMITIVES — British Airways web palette (BA/ai_cv.md)
     ============================================================ */

  /* Midnight Blue — structural chrome (nav, hero, footer, primary action) */
  --color-navy:       #011e41;   /* Midnight Blue — white on this = 16.6:1 */
  --color-navy-hov:   #0a2d57;   /* one step lighter — hover  (white 13.8:1) */
  --color-navy-light: #1a4a7a;   /* mid-navy — secondary interactive surfaces (white 9.1:1) */

  /* Speedbird Red — semantic only (disruption / error / sale). Never decorative,
     never a gradient, never paired with navy in one element. */
  --color-speedbird:     #eb2226;   /* brand-true red — DECORATIVE / large marks only:
                                        white text on it is 4.4:1 (below AA for body text) */
  --color-speedbird-hov: #c81a1e;   /* AA text-safe red — white on it 5.8:1; this is what
                                        text-bearing red (urgent, error, sale label) ships */

  /* Executive Club gold — loyalty contexts only. A FILL that pairs with dark text
     (navy 6.1:1, ink 4.6:1); never white text (2.7:1), never a text colour on white. */
  --color-gold:      #b8985a;   /* brand-true gold — loyalty fill / rule / accent */
  --color-gold-text: #6f5a2e;   /* AA text-safe gold for the rare gold-as-text case (6.6:1 on white) */

  /* Structural neutrals */
  --color-ink:        #333333;   /* body text on white — 12.6:1 */
  --color-ink-muted:  #595959;   /* captions, sub-labels — 7.0:1 on white */
  --color-paper:      #ffffff;   /* page ground */
  --color-surface1:   #f5f5f5;   /* warm-grey section band (ink 11.6:1) */
  --color-surface2:   #e8e8e8;   /* pressed / disabled surface */
  --color-hairline:   #d4d4d4;   /* 1px rules, card borders, resting input outline */
  --color-mist:       #dbe4f0;   /* pale blue-white — content on the navy surface (11.5:1+ on navy) */

  /* Semantic status (email layer). Fills pair with navy/ink text; the -text variants
     are AA-safe as text on white. */
  --color-success:      #2e7d32;   /* forest green — white on it 5.1:1 */
  --color-warning:      #f57c00;   /* amber FILL — navy on it 6.2:1; NOT AA as text on white */
  --color-warning-text: #a15600;   /* AA text-safe amber — 5.5:1 on white */

  /* Fonts — self-hosted Nunito standing in for MyliusModern (substitution flagged) */
  --font-display: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-body:    "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  /* Spacing scale (8 steps, 4px base — unchanged) */
  --spacing-xs:  4px;
  --spacing-sm:  8px;
  --spacing-md:  16px;
  --spacing-lg:  24px;
  --spacing-xl:  32px;
  --spacing-2xl: 48px;
  --spacing-3xl: 64px;
  --spacing-4xl: 96px;

  /* Radius — BA runs a tight, transactional scale: 4px and 8px, no 12/16 middle tier
     (ai_cv "Shapes"). lg 16px is reserved for large editorial panels only. */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;

  /* Shadows — hairline borders are BA's primary depth signal, so shadows stay quiet
     (ink-tinted, low alpha; used only for hover lift and overlay surfaces). */
  --shadow-sm: 0 1px 2px rgba(1, 30, 65, 0.06);
  --shadow-md: 0 4px 6px rgba(1, 30, 65, 0.08);
  --shadow-lg: 0 10px 15px rgba(1, 30, 65, 0.10);

  /* Layout */
  --maxw:   1200px;
  --gutter: 24px;

  /* Type ramp — generic modular scale (unchanged). The BA EMAIL type scale
     (42/32/28/22/18 display, 20/16/14 body, all weight 400/300) is resolved for
     inline compilation in tokens.json -> "email", not here. */
  --type-display: clamp(40px, 6vw, 76px);
  --type-h1:      clamp(32px, 4vw, 56px);
  --type-h2:      clamp(24px, 2.5vw, 34px);
  --type-h3:      20px;
  --type-lead:    clamp(18px, 1.5vw, 22px);
  --type-body:    16px;
  --type-caption: 13px;
  --type-eyebrow: 12px;

  /* ============================================================
     2. SEMANTIC MAP — the contract, bound to the BA palette.
     ============================================================ */

  /* Foreground / surface (light context) */
  --color-fg:            var(--color-ink);         /* 12.6:1 on white — AA */
  --color-fg-muted:      var(--color-ink-muted);   /* 7.0:1 on white — AA */
  --color-bg:            var(--color-paper);
  --color-bg-surface:    var(--color-paper);       /* white cards; #f5f5f5 bands are page-level */
  --color-border:        var(--color-hairline);
  --color-border-strong: var(--color-ink);

  /* Accent — Midnight Blue AS STRUCTURE (not red). Navy is the header, hero, footer
     and primary action; it is the frame the page hangs in. */
  --color-accent:           var(--color-navy);        /* navy-on-white 16.6:1 for links/CTA text */
  --color-accent-hover:     var(--color-navy-hov);
  --color-accent-active:    var(--color-navy-light);
  --color-accent-fg:        var(--color-paper);        /* white on navy 16.6:1 — AA */
  --color-accent-secondary: var(--color-ink-muted);

  /* Extended roles (declared in the contract per S3) */
  --color-loyalty: var(--color-gold);            /* Executive Club — pairs with navy/ink text */
  --color-urgent:  var(--color-speedbird-hov);   /* disruption / error / sale — AA text-safe red */

  /* Inverse (content on the Midnight Blue surface — the navy chrome) */
  --color-bg-inverse:           var(--color-navy);
  --color-fg-on-inverse:        var(--color-mist);     /* 13.0:1 on navy — AA */
  --color-fg-on-inverse-strong: var(--color-paper);    /* white — 16.6:1 on navy */
  /* muted carries small de-emphasised labels on the navy surface (section labels,
     meta, the wordmark tag), so it is calibrated UP from the neutral 50% to 62% mist
     over navy = 5.7:1, clearing AA for small text. soft (82%) is 9.0:1. */
  --color-fg-on-inverse-muted:  color-mix(in srgb, var(--color-fg-on-inverse) 62%, transparent);
  --color-fg-on-inverse-soft:   color-mix(in srgb, var(--color-fg-on-inverse) 82%, transparent);
  --color-inverse-line:         color-mix(in srgb, var(--color-fg-on-inverse) 12%, transparent);
  --color-inverse-wash:         color-mix(in srgb, var(--color-fg-on-inverse) 6%,  transparent);
  --color-on-dark-border:       color-mix(in srgb, var(--color-white) 50%, transparent);
}