/* ============================================================
   ALPHA Component Solutions — Colors & Type Foundation
   Source: Charte graphique ALPHA (brand guidelines PDF)
   Brand font: Albert Sans (the exact typeface specified in the charte),
   hosted locally — see fonts.css. No request to Google Fonts.
   ============================================================ */

:root {
  /* ---------- BRAND CORE (primary duo) ---------- */
  --alpha-navy:        #20325a;  /* PANTONE 534C — primary navy  */
  --alpha-red:         #e1261c;  /* PANTONE 485C — primary red   */

  /* ---------- EXTENDED NAVY / BLUE SCALE ---------- */
  --navy-900:          #051039;  /* PANTONE 296C — deepest navy   */
  --navy-800:          #10133f;  /* PANTONE 2765C — deep indigo   */
  --navy-700:          #20325a;  /* PANTONE 534C — primary navy   */
  --slate-500:         #718ca4;  /* PANTONE 5425C — slate blue    */
  --mist-200:          #e3e8ec;  /* PANTONE 7541C — pale cool grey*/

  /* ---------- RED SCALE ---------- */
  --red-500:           #e1261c;  /* PANTONE 485C — primary red    */
  --red-700:           #981711;  /* PANTONE 7627C — dark brick    */

  /* ---------- NEUTRALS ---------- */
  --grey-500:          #706f6f;  /* PANTONE 424C — neutral grey   */
  --white:             #ffffff;
  --paper:             #f7f9fb;  /* near-white app/page surface   */
  --ink:               #0d1a33;  /* default text on light         */

  /* derived neutral steps (oklch-harmonised around mist/grey) */
  --grey-100:          #eef1f4;
  --grey-200:          #dde3e9;
  --grey-300:          #c4cdd6;
  --grey-400:          #9aa6b2;
  --grey-600:          #565a60;
  --grey-700:          #3a3d42;

  /* ---------- SEMANTIC SURFACES ---------- */
  --bg-page:           var(--paper);
  --bg-surface:        var(--white);
  --bg-raised:         var(--white);
  --bg-inverse:        var(--navy-900);
  --bg-inverse-2:      var(--navy-700);
  --bg-subtle:         var(--mist-200);

  /* ---------- SEMANTIC TEXT ---------- */
  --fg1:               var(--navy-900);   /* primary text          */
  --fg2:               var(--navy-700);   /* secondary headings    */
  --fg3:               var(--grey-600);   /* muted body            */
  --fg4:               var(--grey-400);   /* faint / captions      */
  --fg-on-dark:        #ffffff;
  --fg-on-dark-soft:   #b8c4d4;           /* slate-tinted on navy  */
  --fg-accent:         var(--alpha-red);

  /* ---------- SEMANTIC LINES ---------- */
  --border:            var(--grey-200);
  --border-strong:     var(--grey-300);
  --border-on-dark:    rgba(255,255,255,.16);
  --focus-ring:        color-mix(in srgb, var(--slate-500) 60%, transparent);

  /* ---------- STATUS (aerospace ops semantics) ---------- */
  --status-aog:        #e1261c;  /* Aircraft On Ground — critical */
  --status-aog-bg:     #fdeceb;
  --status-progress:   #20325a;  /* in repair / in transit        */
  --status-progress-bg:#e6eaf1;
  --status-ready:      #1f8a5b;  /* serviceable / ready-to-ship   */
  --status-ready-bg:   #e7f3ed;
  --status-watch:      #c77d12;  /* attention / due soon          */
  --status-watch-bg:   #fbf1e0;

  /* ---------- BRAND GRADIENT (logo dna: navy → red) ---------- */
  --grad-apex:         linear-gradient(120deg, var(--navy-700) 0%, var(--navy-800) 42%, var(--red-700) 78%, var(--red-500) 100%);
  --grad-navy:         linear-gradient(160deg, var(--navy-700) 0%, var(--navy-900) 100%);
  --grad-red:          linear-gradient(160deg, var(--red-500) 0%, var(--red-700) 100%);

  /* ---------- TYPE FAMILIES ---------- */
  --font-sans:   'Albert Sans', 'Helvetica Neue', Arial, sans-serif; /* office fallback: Arial */
  --font-display:'Albert Sans', 'Helvetica Neue', Arial, sans-serif;

  /* ---------- TYPE WEIGHTS (Albert Sans full range) ---------- */
  --w-thin: 100; --w-extralight: 200; --w-light: 300; --w-regular: 400;
  --w-medium: 500; --w-semibold: 600; --w-bold: 700; --w-extrabold: 800; --w-black: 900;

  /* ---------- TYPE SCALE (1.25 major-third-ish) ---------- */
  --t-display:  clamp(2.75rem, 5vw, 4.5rem);   /* 44 → 72  */
  --t-h1:       clamp(2.25rem, 3.6vw, 3rem);   /* 36 → 48  */
  --t-h2:       clamp(1.75rem, 2.6vw, 2.25rem);/* 28 → 36  */
  --t-h3:       1.5rem;    /* 24 */
  --t-h4:       1.25rem;   /* 20 */
  --t-body-lg:  1.125rem;  /* 18 */
  --t-body:     1rem;      /* 16 */
  --t-small:    0.875rem;  /* 14 */
  --t-caption:  0.75rem;   /* 12 */
  --t-overline: 0.6875rem; /* 11 */

  /* ---------- RADII (charte: blocks with partially rounded corners) ---------- */
  --r-xs: 3px; --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-xl: 24px; --r-pill: 999px;

  /* ---------- SPACING (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; --s-20: 80px;

  /* ---------- ELEVATION ---------- */
  --shadow-xs: 0 1px 2px rgba(5,16,57,.06);
  --shadow-sm: 0 1px 3px rgba(5,16,57,.08), 0 1px 2px rgba(5,16,57,.06);
  --shadow-md: 0 4px 14px rgba(5,16,57,.10), 0 2px 4px rgba(5,16,57,.06);
  --shadow-lg: 0 12px 32px rgba(5,16,57,.14), 0 4px 8px rgba(5,16,57,.08);
  --shadow-navy: 0 16px 40px rgba(16,19,63,.30);
}

/* ============================================================
   SEMANTIC ELEMENT DEFAULTS
   ============================================================ */
body {
  font-family: var(--font-sans);
  color: var(--fg1);
  background: var(--bg-page);
  font-weight: var(--w-regular);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.alpha-display {
  font-family: var(--font-display);
  font-weight: var(--w-extrabold);
  font-size: var(--t-display);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--fg1);
}
.alpha-h1 { font-weight: var(--w-bold); font-size: var(--t-h1); line-height: 1.06; letter-spacing: -0.015em; color: var(--fg1); }
.alpha-h2 { font-weight: var(--w-bold); font-size: var(--t-h2); line-height: 1.12; letter-spacing: -0.01em; color: var(--fg1); }
.alpha-h3 { font-weight: var(--w-semibold); font-size: var(--t-h3); line-height: 1.2; color: var(--fg1); }
.alpha-h4 { font-weight: var(--w-semibold); font-size: var(--t-h4); line-height: 1.3; color: var(--fg1); }
.alpha-body-lg { font-weight: var(--w-regular); font-size: var(--t-body-lg); line-height: 1.6; color: var(--fg3); }
.alpha-body { font-weight: var(--w-regular); font-size: var(--t-body); line-height: 1.6; color: var(--fg3); }
.alpha-small { font-weight: var(--w-regular); font-size: var(--t-small); line-height: 1.5; color: var(--fg3); }
.alpha-caption { font-weight: var(--w-medium); font-size: var(--t-caption); line-height: 1.4; color: var(--fg4); }

/* Overline / eyebrow — a recurring ALPHA device: uppercase, tracked, often red */
.alpha-overline {
  font-weight: var(--w-bold);
  font-size: var(--t-overline);
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--alpha-red);
}