/* ============================================================
   BIRDLAND ENGINEERING — Maryland Mechanical
   Design tokens: color, type, spacing, radii, shadow, motion
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap');

/* ---------- Montserrat (local, variable) ---------- */
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/Montserrat-VariableFont_wght.ttf") format("truetype-variations");
}
@font-face {
  font-family: "Montserrat";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/Montserrat-Italic-VariableFont_wght.ttf") format("truetype-variations");
}

:root {
  /* ---------- BRAND COLORS ---------- */
  --industrial-black: #121212;   /* structural ground, headers, primary text */
  --oriole-gold:      #FDB813;   /* primary action, highlight, active state */
  --calvert-red:      #CE1126;   /* secondary accent, alerts, critical data */
  --drafting-gray:    #E6E6E5;   /* app/page background */
  --stark-white:      #FFFFFF;   /* canvas, cards, type on dark */

  /* ---------- TINTS & SHADES (oklch-derived from brand) ---------- */
  --black-90:  #1f1f1f;
  --black-70:  #3a3a3a;
  --black-50:  #6b6b6b;
  --black-30:  #a3a3a3;
  --black-15:  #c8c8c8;

  --gold-tint:    #FFE9A8;
  --gold-soft:    #FFD05A;
  --gold-bold:    #E5A20A;        /* hover for primary action */
  --gold-deep:    #8C5F00;

  --red-tint:     #FBD8DC;
  --red-bold:     #A50D1E;        /* hover for destructive */

  --paper:        #F4F3F1;        /* lighter than drafting-gray, for content */
  --paper-warm:   #FAF8F4;
  --rule:         #D6D6D4;        /* hairline rule between Drafting Gray + cards */

  /* ---------- SEMANTIC FOREGROUND ---------- */
  --fg-1: var(--industrial-black);
  --fg-2: var(--black-70);
  --fg-3: var(--black-50);
  --fg-disabled: var(--black-30);
  --fg-on-dark: var(--stark-white);
  --fg-on-gold: var(--industrial-black);
  --fg-on-red:  var(--stark-white);
  --fg-link:    var(--industrial-black);
  --fg-accent:  var(--oriole-gold);

  /* ---------- SEMANTIC BACKGROUND ---------- */
  --bg-app:    var(--drafting-gray);
  --bg-card:   var(--stark-white);
  --bg-dark:   var(--industrial-black);
  --bg-muted:  var(--paper);

  /* ---------- STATE ---------- */
  --state-success: #1F8A5B;
  --state-warning: var(--oriole-gold);
  --state-error:   var(--calvert-red);
  --state-info:    #2A6FDB;

  /* ---------- TYPOGRAPHY ---------- */
  --font-sans: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", Menlo, monospace;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold: 600;
  --fw-bold:    700;
  --fw-extrabold: 800;

  /* Type scale — tuned to Montserrat at 16px base */
  --fs-hero:    clamp(64px, 8vw, 128px);   /* H1 hero — extrabold all-caps */
  --fs-display: clamp(48px, 5.5vw, 80px);  /* section opener */
  --fs-h1:      48px;
  --fs-h2:      36px;
  --fs-h3:      24px;
  --fs-h4:      18px;
  --fs-body-lg: 18px;
  --fs-body:    16px;
  --fs-body-sm: 14px;
  --fs-label:   12px;   /* SemiBold all-caps overline */
  --fs-micro:   10px;

  --lh-tight:   1.02;
  --lh-snug:    1.15;
  --lh-normal:  1.45;
  --lh-relaxed: 1.6;

  --ls-hero:    -0.02em;
  --ls-tight:   -0.01em;
  --ls-normal:  0;
  --ls-wide:    0.08em;     /* labels / overlines */
  --ls-wider:   0.14em;     /* eyebrow over hero */

  /* ---------- SPACING (8pt-leaning, with a 4px micro) ---------- */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  /* ---------- RADIUS (Aerospace — pill + rounded card) ---------- */
  --r-none:  0;
  --r-xs:    4px;
  --r-sm:    8px;
  --r-md:    12px;
  --r-card:  16px;        /* default card */
  --r-lg:    24px;
  --r-xl:    32px;
  --r-pill:  9999px;      /* buttons */

  /* ---------- ELEVATION ---------- */
  --shadow-0: none;
  --shadow-1: 0 1px 2px rgba(18,18,18,0.06), 0 1px 1px rgba(18,18,18,0.04);
  --shadow-2: 0 4px 12px rgba(18,18,18,0.08), 0 1px 2px rgba(18,18,18,0.04);
  --shadow-3: 0 12px 28px rgba(18,18,18,0.10), 0 2px 4px rgba(18,18,18,0.05);
  --shadow-gold: 0 8px 24px rgba(253,184,19,0.35);
  --inset-rule: inset 0 0 0 1px var(--rule);

  /* ---------- MOTION ---------- */
  --ease-standard: cubic-bezier(.2,.7,.2,1);
  --ease-emphasized: cubic-bezier(.18,.89,.32,1.28);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 360ms;

  /* ---------- LAYOUT ---------- */
  --content-max: 1280px;
  --gutter:      32px;
}

/* ============================================================
   BASE
   ============================================================ */
html, body {
  margin: 0;
  background: var(--bg-app);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  font-weight: var(--fw-regular);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ============================================================
   SEMANTIC TYPE
   ============================================================ */
.t-hero {
  font-family: var(--font-sans);
  font-weight: var(--fw-extrabold);
  font-size: var(--fs-hero);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-hero);
  text-transform: uppercase;
  color: var(--fg-1);
}
.t-display {
  font-weight: var(--fw-extrabold);
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  text-transform: uppercase;
}
h1, .t-h1 {
  font-weight: var(--fw-bold);
  font-size: var(--fs-h1);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  margin: 0;
}
h2, .t-h2 {
  font-weight: var(--fw-bold);
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  margin: 0;
}
h3, .t-h3 {
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  margin: 0;
}
h4, .t-h4 {
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  margin: 0;
}
p, .t-body {
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  font-weight: var(--fw-regular);
  margin: 0;
}
.t-body-lg {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-relaxed);
}
.t-body-sm {
  font-size: var(--fs-body-sm);
  line-height: var(--lh-normal);
  color: var(--fg-2);
}
.t-label {
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--fg-2);
}
.t-eyebrow {
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
  color: var(--oriole-gold);
}
.t-mono {
  font-family: var(--font-mono);
  font-size: var(--fs-body-sm);
}

/* ============================================================
   UTILITY
   ============================================================ */
.surface-card {
  background: var(--bg-card);
  border-radius: var(--r-card);
  padding: var(--space-6);
  box-shadow: var(--shadow-2);
}
.surface-dark {
  background: var(--bg-dark);
  color: var(--fg-on-dark);
}
.rule { border-top: 1px solid var(--rule); }