/* BA — semantic token CONTRACT (brand-agnostic)
 *
 * Cloned from the shared portfolio chassis contract for the British Airways Email
 * Designer concept build. In this project there is no base/
 * generator, so this file IS the contract source of truth: hand-maintained, not a
 * generated mirror. Edit it only to declare a genuinely new semantic ROLE (rule S3).
 *
 * This is the interface between the base and the client pack. It declares every
 * semantic token the components in system/components.css reference, with NEUTRAL
 * fallback defaults (greyscale + one plain blue accent). No brand lives here.
 *
 * The BA pack (system/tokens.ba.css) is loaded AFTER this file and overrides these
 * values with British Airways' own. With no pack loaded, the base still renders as a
 * coherent, unbranded neutral theme, proving the base carries structure, not aesthetics.
 *
 * Rule: if a component or page starts using a new semantic token, declare it HERE
 * first (S3). Brand-specific VALUES (a real palette, fonts, radius, type scale) belong
 * in the pack, never here.
 */

:root {
  /* ---- Colour: foreground / surface (light context) ---- */
  --color-fg:            #1a1a1a;
  --color-fg-muted:      #6b7280;
  --color-bg:            #ffffff;
  --color-bg-surface:    #f4f4f5;
  --color-border:        #d4d4d8;
  --color-border-strong: #1a1a1a;
  --color-white:         #ffffff;

  /* ---- Colour: accent ---- */
  --color-accent:           #2563eb;
  --color-accent-hover:     #1d4ed8;
  --color-accent-active:    #1e40af;
  --color-accent-fg:        #ffffff;
  --color-accent-secondary: #64748b;

  /* ---- Colour: extended roles (declared per S3; bound by the pack) ----
     Added for the BA build: a loyalty role (Executive Club gold, a fill that pairs
     with dark text) and an urgent role (disruption / error / sale, a text-safe red).
     Neutral defaults so an unbranded render stays coherent; the pack supplies BA values.
     The site chrome references NEITHER of these, so the "chrome reskins with zero
     contract edits" proof is unaffected: they exist only for the email layer. */
  --color-loyalty:  #8a6d3b;
  --color-urgent:   #b91c1c;

  /* ---- Colour: inverse (content on a dark surface) ---- */
  --color-bg-inverse:           #1a1a1a;
  --color-fg-on-inverse:        #f4f4f5;
  --color-fg-on-inverse-strong: #ffffff;
  --color-fg-on-inverse-muted:  color-mix(in srgb, var(--color-fg-on-inverse) 50%, 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);

  /* ---- Fonts (neutral system stack; a pack picks real faces) ---- */
  --font-display: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body:    ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* ---- Spacing (generic 4px scale) ---- */
  --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 (non-zero default: radius is a brand choice, not a base rule) ---- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;

  /* ---- Shadows (neutral, black-tinted) ---- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.10);

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

  /* ---- Type ramp (generic modular scale) ---- */
  --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;
}