/* ═══════════════════════════════════════════════════
   EAGLE SQUADRON — Design System Tokens
   Fonts: Bebas Neue (display), Pacifico (script), Roboto Condensed (body)
   All three self-hosted — see assets/fonts.css
   ═══════════════════════════════════════════════════ */

@import url('assets/fonts.css');

:root {

  /* ── BASE COLOR PALETTE ── */
  --color-crimson-red:    #C82020;
  --color-streak-black:   #1C1C1C;
  --color-streak-gray:    #888888;
  --color-vapor-white:    #F5F5F5;
  --color-runway-white:   #FFFFFF;
  --color-text-primary:   #333333;
  --color-text-secondary: #666666;

  /* ── SEMANTIC COLOR TOKENS ── */
  --bg-page:          var(--color-runway-white);
  --bg-section-alt:   var(--color-vapor-white);
  --bg-dark:          var(--color-streak-black);
  --bg-accent:        var(--color-crimson-red);

  --fg-primary:       var(--color-text-primary);
  --fg-secondary:     var(--color-text-secondary);
  --fg-on-dark:       var(--color-vapor-white);
  --fg-on-accent:     var(--color-runway-white);
  --fg-muted:         var(--color-streak-gray);

  --accent:           var(--color-crimson-red);
  --accent-dark:      #a01818;

  --border-subtle:    #E8E8E8;
  --border-divider:   rgba(255,255,255,0.08);
  --border-dark:      rgba(255,255,255,0.1);

  /* ── TYPOGRAPHY — FONT FAMILIES ── */
  --font-display: 'Bebas Neue', 'Oswald', sans-serif;
  --font-script:  'Pacifico', cursive;
  --font-body:    'Roboto Condensed', 'Source Sans Pro', sans-serif;

  /* ── TYPOGRAPHY — SCALE ── */
  --text-hero:        6rem;       /* Bebas Neue, line-height 0.9 */
  --text-h1:          3.25rem;    /* Bebas Neue */
  --text-h2:          2.75rem;    /* Bebas Neue */
  --text-h3:          2rem;       /* Bebas Neue */
  --text-h4:          1.3rem;     /* Bebas Neue */
  --text-script-lg:   1.5rem;     /* Pacifico */
  --text-script-md:   1.15rem;    /* Pacifico */
  --text-script-sm:   0.95rem;    /* Pacifico */
  --text-body-lg:     1.05rem;    /* Roboto Condensed */
  --text-body:        1rem;       /* Roboto Condensed */
  --text-body-sm:     0.875rem;   /* Roboto Condensed */
  --text-label:       0.75rem;    /* Roboto Condensed 700, tracked */
  --text-micro:       0.72rem;    /* Roboto Condensed */

  /* ── TYPOGRAPHY — LINE HEIGHTS ── */
  --lh-hero:    0.9;
  --lh-display: 1;
  --lh-tight:   1.1;
  --lh-body:    1.75;
  --lh-relaxed: 1.7;

  /* ── LETTER SPACING ── */
  --ls-display:  1px;
  --ls-wide:     2px;
  --ls-wider:    3px;
  --ls-label:    4px;
  --ls-nav:      1.5px;

  /* ── SPACING SCALE ── */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-7:   28px;
  --space-8:   32px;
  --space-9:   36px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;
  --space-gutter: 60px; /* standard horizontal section gutter */

  /* ── BORDER RADIUS ── */
  --radius-sharp: 2px;  /* standard — nearly square */
  --radius-none:  0;

  /* ── SHADOWS ── */
  --shadow-logo:  drop-shadow(0 2px 16px rgba(0,0,0,0.1));
  --shadow-card:  none; /* cards rely on bg-color difference */

  /* ── STREAK GRADIENT (brand motif) ── */
  --streak-gradient: linear-gradient(90deg, var(--color-crimson-red) 0%, var(--color-crimson-red) 40%, var(--color-streak-gray) 70%, transparent 100%);
  --streak-height-sm: 2px;
  --streak-height-md: 3px;
  --streak-height-lg: 4px;

  /* ── HERO OVERLAY ── */
  --hero-overlay: linear-gradient(100deg, rgba(20,20,20,0.88) 0%, rgba(20,20,20,0.82) 35%, rgba(20,20,20,0.45) 60%, rgba(20,20,20,0.05) 100%);
}

/* ── SEMANTIC ELEMENT DEFAULTS ── */
body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  color: var(--fg-primary);
  background: var(--bg-page);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  letter-spacing: var(--ls-display);
  line-height: var(--lh-display);
  color: var(--color-streak-black);
}

h1 { font-size: var(--text-h1); }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); }
h4 { font-size: var(--text-h4); }

p {
  font-family: var(--font-body);
  font-size: var(--text-body);
  color: var(--fg-secondary);
  line-height: var(--lh-body);
}

/* ── UTILITY CLASSES ── */

/* Label / eyebrow */
.es-label {
  font-family: var(--font-body);
  font-size: var(--text-label);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--accent);
  display: flex;
  align-items: center;
  gap: 12px;
}
.es-label::after {
  content: '';
  display: inline-block;
  width: 40px;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), transparent);
}

/* Streak bar */
.es-streak {
  height: var(--streak-height-md);
  background: var(--streak-gradient);
}

/* Buttons */
.es-btn-primary {
  background: var(--accent);
  color: var(--fg-on-accent);
  font-family: var(--font-display);
  font-size: 1.1rem;
  letter-spacing: var(--ls-wide);
  padding: 14px 36px;
  border-radius: var(--radius-sharp);
  border: none;
  cursor: pointer;
  display: inline-block;
  text-decoration: none;
  text-transform: uppercase;
}

.es-btn-outline {
  background: transparent;
  color: rgba(255,255,255,0.75);
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 1px;
  padding: 12px 28px;
  border-radius: var(--radius-sharp);
  border: 2px solid rgba(255,255,255,0.5);
  cursor: pointer;
  display: inline-block;
  text-decoration: none;
}

.es-btn-dark {
  background: var(--bg-dark);
  color: var(--fg-on-dark);
  font-family: var(--font-display);
  font-size: 1.2rem;
  letter-spacing: var(--ls-wide);
  padding: 16px 44px;
  border-radius: var(--radius-sharp);
  border: none;
  cursor: pointer;
  display: inline-block;
  text-decoration: none;
}

.es-btn-nav {
  background: var(--accent);
  color: var(--fg-on-accent);
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 10px 24px;
  border-radius: var(--radius-sharp);
  border: none;
  cursor: pointer;
  display: inline-block;
  text-decoration: none;
}