/* ============================================================
   HOP AERO — Colors & Type Foundations
   Project to the horizon. Serious, with soul.
   ============================================================ */

/* ---------- FONTS ---------- */
@font-face {
  font-family: 'Suborbital';
  src: url('fonts/Suborbital.woff2') format('woff2'),
       url('fonts/Suborbital.woff') format('woff'),
       url('fonts/Suborbital.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Suborbital';
  src: url('fonts/Suborbital Bold.woff2') format('woff2'),
       url('fonts/Suborbital Bold.woff') format('woff'),
       url('fonts/Suborbital Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
/* Alias so the supplied logo SVGs (which reference 'Suborbital-Bold') resolve
   when inlined into the DOM. SVGs loaded via <img> cannot see these faces. */
@font-face {
  font-family: 'Suborbital-Bold';
  src: url('fonts/Suborbital Bold.woff2') format('woff2'),
       url('fonts/Suborbital Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
/* Telemetry / data mono — SUBSTITUTE (no brand mono supplied).
   Swap for a licensed mono if one exists. */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap');
/* UI / body sans — SUBSTITUTE. Suborbital is a DISPLAY face; this carries
   running UI text, inputs, and long-form copy. Swap if a brand text face exists. */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&display=swap');

:root {
  /* ============================================================
     COLOR — RAW PALETTE
     Sampled from the brand gradients (twilight, atmosphere, sunrise)
     ============================================================ */

  /* Ink — dark-first surfaces. Deep ATMOSPHERE navy, ultramarine-tinted
     (not neutral black). Lifted brighter so it reads as night sky, not void. */
  --ink-950: #060B1E;   /* void */
  --ink-900: #0B1430;   /* primary canvas — clearly navy, lifted */
  --ink-850: #0F1A3A;   /* raised canvas */
  --ink-800: #142142;   /* panel */
  --ink-700: #1D2A52;   /* card / raised panel */
  --ink-600: #283766;   /* hairline-on-dark, hover fill */
  --ink-500: #34457A;   /* strong divider on dark */

  /* Hop Blue — the atmosphere ultramarine. Primary brand. */
  --blue-950: #001137;  /* deep horizon */
  --blue-900: #001458;
  --blue-800: #011372;
  --blue-700: #011699;
  --blue-600: #0117A3;  /* CORE BRAND ULTRAMARINE (deep) */
  --blue-500: #3B59F2;  /* interactive / vivid — lighter */
  --blue-400: #6580FA;  /* hover */
  --blue-300: #98AAFC;  /* on-dark accent text */
  --blue-200: #C2CEFE;

  /* Twilight — atmospheric slate blues (horizon transition) */
  --twilight-700: #233E6E;
  --twilight-600: #396296;
  --twilight-500: #6994B6;
  --twilight-400: #88A8BC;
  --twilight-300: #A7B8BC;

  /* Horizon — sunrise warmth. The soul of the system. Dawn peach-gold,
     not safety-orange: softened + lifted toward the sunrise gradient. */
  --horizon-700: #CC7B45;  /* sunset coral */
  --horizon-600: #EFBA86;  /* CORE WARM ACCENT (dawn peach-gold) */
  --horizon-500: #EABA7E;  /* twilight sand */
  --horizon-400: #E2B586;  /* dawn peach */
  --horizon-300: #F4D6B2;  /* pale dawn */

  /* Mint — sunrise crown (cool counterpoint, sparing use) */
  --mint-500: #A7D8D3;
  --mint-400: #C2E1CE;
  --mint-300: #D4E1C2;

  /* Slate neutrals — cool, technical */
  --slate-50:  #EEF2F8;
  --slate-100: #DCE3EE;
  --slate-200: #C0CAD9;
  --slate-300: #9BA8BD;
  --slate-400: #74829B;
  --slate-500: #586480;
  --slate-600: #414B63;
  --slate-700: #2E3648;
  --slate-800: #1E2433;
  --slate-900: #12161F;
  --white: #FFFFFF;

  /* Semantic signal colors (tuned for dark ops surfaces) */
  --signal-go:     #4FD08A;  /* nominal / go */
  --signal-go-dim: #173A2A;
  --signal-warn:   #E9A85C;  /* caution — reuses horizon */
  --signal-warn-dim:#3A2C16;
  --signal-abort:  #FF5D52;  /* abort / fault */
  --signal-abort-dim:#3A1614;
  --signal-info:   #4663F2;  /* info — reuses blue */

  /* ============================================================
     SEMANTIC TOKENS — DARK (default surface)
     ============================================================ */
  --bg:        var(--ink-900);
  --bg-raised: var(--ink-850);
  --bg-panel:  var(--ink-800);
  --bg-card:   var(--ink-700);
  --bg-hover:  var(--ink-600);

  --fg-1: var(--slate-50);    /* primary text */
  --fg-2: var(--slate-300);   /* secondary text */
  --fg-3: var(--slate-400);   /* tertiary / captions */
  --fg-disabled: var(--slate-600);

  --line-1: rgba(155,168,189,0.14);  /* hairline */
  --line-2: rgba(155,168,189,0.26);  /* divider */
  --line-strong: var(--ink-500);

  --accent: var(--blue-500);
  --accent-strong: var(--blue-600);
  --accent-fg: var(--white);
  --warm: var(--horizon-600);

  /* Brand gradients */
  --grad-atmosphere: linear-gradient(180deg, #0117A3 0%, #011699 38%, #001458 72%, #001137 100%); /* @kind color */
  --grad-twilight:   linear-gradient(180deg, #233E6E 0%, #6994B6 42%, #A7B8BC 62%, #D1C3A9 82%, #EABA7E 100%); /* @kind color */
  --grad-sunrise:    linear-gradient(180deg, #A7D8D3 0%, #CBE1C9 48%, #E6D3A2 80%, #E2B586 100%); /* @kind color */
  --grad-horizon-line: linear-gradient(90deg, transparent, var(--horizon-600), transparent);

  /* ============================================================
     TYPE — FAMILIES
     ============================================================ */
  --font-display: 'Suborbital', 'Suborbital-Bold', system-ui, sans-serif;
  --font-body:    'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --font-ui:      'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', 'SFMono-Regular', ui-monospace, monospace;

  /* Type scale (1.250 major-third on a 16px base, display jumps wider) */
  --fs-display: 88px;
  --fs-h1: 56px;
  --fs-h2: 40px;
  --fs-h3: 28px;
  --fs-h4: 22px;
  --fs-body-lg: 19px;
  --fs-body: 16px;
  --fs-sm: 14px;
  --fs-xs: 12px;
  --fs-mono: 13px;

  /* Tracking — Suborbital is geometric; caps/labels want air */
  --track-tight: -0.02em;
  --track-normal: 0; /* @kind spacing */
  --track-label: 0.08em;
  --track-mono: 0.02em;

  --lh-tight: 1.02; /* @kind font */
  --lh-snug: 1.15; /* @kind font */
  --lh-body: 1.55; /* @kind font */

  /* ============================================================
     SPACING / RADII / ELEVATION
     ============================================================ */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
  --sp-9: 96px; --sp-10: 128px;

  /* Radii — restrained. Hardware, not consumer-soft. */
  --r-none: 0; /* @kind radius */
  --r-sm: 2px;
  --r-md: 4px;
  --r-lg: 8px;
  --r-pill: 999px;

  /* Elevation — dark UIs lift with light borders + deep shadow */
  --shadow-1: 0 1px 0 rgba(255,255,255,0.03) inset, 0 2px 8px rgba(0,0,0,0.4);
  --shadow-2: 0 1px 0 rgba(255,255,255,0.04) inset, 0 8px 24px rgba(0,0,0,0.5);
  --shadow-3: 0 1px 0 rgba(255,255,255,0.05) inset, 0 24px 64px rgba(0,0,0,0.6);
  --glow-blue: 0 0 0 1px rgba(27,63,232,0.5), 0 0 28px rgba(27,63,232,0.35);
  --glow-warm: 0 0 28px rgba(233,168,92,0.3);
}

/* ============================================================
   SEMANTIC ELEMENT STYLES — opt-in via .ha-type scope
   ============================================================ */
.ha-type { color: var(--fg-1); font-family: var(--font-body); }

.ha-display {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--fs-display); line-height: var(--lh-tight);
  letter-spacing: var(--track-tight);
}
.ha-h1 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: var(--track-tight); }
.ha-h2 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h2); line-height: var(--lh-snug); letter-spacing: var(--track-tight); }
.ha-h3 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h3); line-height: var(--lh-snug); }
.ha-h4 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h4); line-height: var(--lh-snug); }
.ha-body-lg { font-size: var(--fs-body-lg); line-height: var(--lh-body); color: var(--fg-2); }
.ha-body { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--fg-2); }
.ha-sm { font-size: var(--fs-sm); line-height: 1.45; color: var(--fg-2); }
.ha-caption { font-size: var(--fs-xs); line-height: 1.4; color: var(--fg-3); }

/* Eyebrow / label — uppercase mono, the system's connective tissue */
.ha-label {
  font-family: var(--font-mono); font-weight: 500;
  font-size: var(--fs-xs); text-transform: uppercase;
  letter-spacing: var(--track-label); color: var(--fg-3);
}
.ha-mono { font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: var(--track-mono); color: var(--fg-2); }
.ha-data { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: 0; }