/* ─────────────────────────────────────────────────────────────────────────
   AUREUM MOBILITY — Design Tokens
   colors_and_type.css

   Brand: Aureum Mobility
   Vibe:  Confident, premium, infrastructure-grade. Black gallery walls
          dressed in champagne neutrals and one decisive stroke of gold.
   Font:  Instrument Sans (Google Fonts) — display + body in one family.
   ───────────────────────────────────────────────────────────────────────── */

/* ─────────────────────────────────────────────────────────────────────────
   FONT FACES — Instrument Sans family, bundled locally as woff2.
   Two widths (Normal / Condensed) × four weights × two styles. Width is
   exposed as its own family name (Condensed) because font-stretch isn't
   reliable across static faces. The SemiCondensed width was dropped (unused).

   Instrument Serif is NOT bundled; the rare `.serif` pull-quote falls back to
   a system serif. Add a local @font-face if the team supplies a file — do not
   re-add the render-blocking Google Fonts @import.
   ───────────────────────────────────────────────────────────────────────── */

/* Instrument Serif is not bundled; the rare `.serif` pull-quote falls back to a
   system serif (see --font-serif). Drop a local @font-face here if the team
   supplies a file — do not re-add the render-blocking Google Fonts @import. */

/* ── Instrument Sans (normal width) — woff2 ───────────
   Italic faces removed on purpose: the design system bans italic runs
   (emphasis is by weight only), and no shipped page uses font-style italic. */
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/InstrumentSans-Regular.woff2") format("woff2"); }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/InstrumentSans-Medium.woff2") format("woff2"); }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/InstrumentSans-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/InstrumentSans-Bold.woff2") format("woff2"); }

/* ── Instrument Sans Condensed — woff2 ──────────────── */
@font-face { font-family: "Instrument Sans Condensed"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/InstrumentSans_Condensed-Regular.woff2") format("woff2"); }
@font-face { font-family: "Instrument Sans Condensed"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/InstrumentSans_Condensed-Medium.woff2") format("woff2"); }
@font-face { font-family: "Instrument Sans Condensed"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/InstrumentSans_Condensed-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "Instrument Sans Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/InstrumentSans_Condensed-Bold.woff2") format("woff2"); }

:root {
  /* ── BRAND ── */
  --aureum-gold:        #E8B647;   /* the arrow — primary brand accent */
  --aureum-gold-light:  #F4D77A;   /* gold highlight, hover */
  --aureum-gold-deep:   #8A6410;   /* deep gold — AA-passing as small text on light (5.06:1); bright --aureum-gold stays the accent */
  --aureum-gold-soft:   #F8E9BD;   /* tinted backgrounds, badges */

  /* ── ONYX (the wordmark / gallery walls) ── */
  --onyx-1000:          #0B0B0E;   /* deepest — full bleed backgrounds */
  --onyx-900:           #14141A;   /* canonical dark surface */
  --onyx-800:           #1E1E25;   /* raised dark surface, header */
  --onyx-700:           #2A2A32;   /* dividers on dark */
  --onyx-600:           #3A3A44;
  --onyx-500:           #5C5A60;   /* muted text on dark */

  /* ── CHAMPAGNE (warm neutrals — the deck's pale background) ── */
  --champagne-50:       #FAF8F2;   /* page background — warm ivory */
  --champagne-100:      #F2EEE2;   /* canonical cream surface */
  --champagne-200:      #E7E0CC;   /* card edges, soft borders */
  --champagne-300:      #D3CAB0;
  --champagne-400:      #A8A088;

  /* ── COOL ACCENT (vertiport light / pad markings) ── */
  --signal-cyan:        #6EE6F2;   /* status / runway lighting */
  --signal-cyan-deep:   #1C8FA1;

  /* ── SEMANTIC / SYSTEM ── */
  --success:            #4FA66B;
  --warning:            #E8A547;
  --danger:             #C84A3D;
  --info:               #3D7FC8;
  --error-text:         #F0A59C;   /* readable danger text on the dark field (AA on --dusk-1) */
  --ok-text:            #8FD6A6;   /* readable success text on the dark field (AA on --dusk-1) */

  /* ── FOREGROUND / BACKGROUND aliases ──
     Legacy light/dark alias system (pre-v-next). The site now renders on ONE
     permanent golden-hour dark field, so on-page text uses the v-next on-dark
     tokens (--tx-1/2/3) directly — see the SEMANTIC TYPE section below. These
     --fg-* / --bg aliases + the [data-theme="dark"] block are retained for any
     future light surface but are not on the live render path. */
  --bg:                 var(--champagne-50);
  --bg-elev:            #FFFFFF;
  --bg-sunk:            var(--champagne-100);
  --surface-line:       var(--champagne-200);

  --fg-1:               var(--onyx-900);   /* primary text */
  --fg-2:               #3A3A40;           /* secondary text */
  --fg-3:               #6B6862;           /* tertiary / captions */
  --fg-muted:           #93908A;
  --fg-on-gold:         var(--onyx-1000);  /* text laid on gold fills */
  --fg-on-onyx:         var(--champagne-50);

  /* ── TYPE FAMILIES ── */
  --font-sans: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-sans-condensed: "Instrument Sans Condensed", "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
  --font-serif: "Instrument Serif", ui-serif, Georgia, "Times New Roman", serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", "Roboto Mono", Menlo, Consolas, monospace;

  /* ── TYPE SCALE (modular, 1920px slide-friendly) ── */
  --fs-display:   72px;   /* hero / title slides */
  --fs-h1:        56px;
  --fs-h2:        40px;
  --fs-h3:        28px;
  --fs-h4:        22px;
  --fs-lead:      20px;   /* deck lede paragraph */
  --fs-body:      16px;
  --fs-small:     14px;
  --fs-caption:   12px;
  --fs-eyebrow:   11px;   /* tracked-out section labels */

  /* ── WEIGHTS ── */
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;

  /* ── TRACKING / LINE HEIGHT ── */
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-eyebrow: 0.22em;    /* AUREUM-style wordmark spacing */

  --lh-tight:     1.05;
  --lh-snug:      1.2;
  --lh-normal:    1.45;
  --lh-loose:     1.65;

  /* ── SPACING (4px base) ── */
  --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;

  /* ── RADII (mostly square — premium / architectural) ── */
  --radius-0:  0;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-pill: 999px;

  /* ── ELEVATION ── */
  --shadow-1: 0 1px 2px rgba(11, 11, 14, 0.06), 0 1px 1px rgba(11, 11, 14, 0.04);
  --shadow-2: 0 4px 12px rgba(11, 11, 14, 0.08), 0 2px 4px rgba(11, 11, 14, 0.04);
  --shadow-3: 0 12px 32px rgba(11, 11, 14, 0.12), 0 4px 8px rgba(11, 11, 14, 0.05);
  --shadow-gold: 0 8px 24px rgba(232, 182, 71, 0.28);
  --shadow-inset-onyx: inset 0 0 0 1px rgba(255, 255, 255, 0.06);

  /* ── BORDERS ── */
  --border-hairline: 1px solid var(--surface-line);
  --border-onyx:     1px solid var(--onyx-700);
  --border-gold:     1px solid var(--aureum-gold);
  --border-gold-thin: 1px solid rgba(232, 182, 71, 0.4);

  /* ── MOTION ── */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out: cubic-bezier(0.65, 0.05, 0.36, 1);
  --dur-fast:  120ms;
  --dur-base:  200ms;
  --dur-slow:  400ms;

  /* ── SIGNATURE GRADIENTS ── */
  --grad-gold: linear-gradient(135deg, #F4D77A 0%, #E8B647 45%, #B88820 100%);
  --grad-onyx-veil: linear-gradient(180deg, rgba(11,11,14,0) 0%, rgba(11,11,14,0.55) 60%, rgba(11,11,14,0.92) 100%);
  --grad-dawn: linear-gradient(180deg, #F5EEDD 0%, #E8B647 60%, #2A2A32 100%);  /* sunset-over-runway */

  /* ─────────────────────────────────────────────────────────────────────────
     GOLD-TRACE ANNOTATION LAYER — powers the AC-16 annotated explorer
     (solutions/droneport) and form focus rings. Trimmed 2026-07-04:
     the unbuilt Platform-Explore-Mode tokens (overlay/lock/slideoff/partner-card/
     subject-hover/champagne-scene) were deleted after a per-token census showed
     zero consumers; only the tokens the shipped explorer + focus system use remain.
     ───────────────────────────────────────────────────────────────────────── */
  --trace-gold:           var(--aureum-gold);        /* connector lines, pip borders */
  --trace-gold-light:     var(--aureum-gold-light);  /* hover/active connector */
  --trace-box-border:     1.5px;     /* callout box border */

  /* draw motion */
  --dur-draw-line:         600ms;
  --dur-draw-box:          300ms;

  /* pip markers */
  --pip-size: 8px;
  --pip-color-inactive: rgba(232, 182, 71, 0.28);
  --pip-color-active:   var(--aureum-gold);

  /* focus ring (also consumed by form focus in site.css) */
  --focus-ring: 0 0 0 3px rgba(232, 182, 71, 0.55);
}

/* ─────────────────────────────────────────────────────────────────────────
   DARK THEME (onyx mode) — flip aliases
   ───────────────────────────────────────────────────────────────────────── */
[data-theme="dark"] {
  --bg:           var(--onyx-1000);
  --bg-elev:      var(--onyx-900);
  --bg-sunk:      var(--onyx-800);
  --surface-line: var(--onyx-700);

  --fg-1:         var(--champagne-50);
  --fg-2:         var(--champagne-200);
  --fg-3:         #A8A088;
  --fg-muted:     var(--onyx-500);
}

/* ─────────────────────────────────────────────────────────────────────────
   SEMANTIC TYPE — drop-in elements
   Text colours use the v-next on-dark tokens (--tx-1/2/3), NOT the legacy
   --fg-* aliases: the live surface is the continuous dark golden-hour field, so
   body/lead/caption must read on dark (champagne, AA-verified), not on light.
   ───────────────────────────────────────────────────────────────────────── */
html, body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--fg-1);
  background: var(--bg);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.display, h1.display {
  font-family: var(--font-sans);
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: var(--fw-semibold);
  text-wrap: balance;
}

h1, .h1 {
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: var(--fw-semibold);
  margin: 0;
  text-wrap: balance;
}

h2, .h2 {
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  font-weight: var(--fw-semibold);
  margin: 0;
  text-wrap: balance;
}

h3, .h3 {
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  font-weight: var(--fw-semibold);
  margin: 0;
}

h4, .h4 {
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  font-weight: var(--fw-medium);
  margin: 0;
}

.lead, p.lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-loose);
  color: var(--tx-2);
  font-weight: var(--fw-regular);
  text-wrap: pretty;
}

p, .body {
  font-size: var(--fs-body);
  line-height: 1.72; /* locked body rhythm (VD-03) — component overrides tighten deliberately */
  color: var(--tx-2);
  margin: 0 0 0.75em;
  text-wrap: pretty;
}

small, .small { font-size: var(--fs-small); color: var(--tx-3); }
.caption { font-size: var(--fs-caption); color: var(--tx-3); letter-spacing: 0.02em; }

/* Eyebrow — tracked-out caps, the AUREUM signature.
   NOTE: site.css owns the live .eyebrow (bright gold on the dark field, AA-passing).
   This legacy rule is kept for any future light surface; uses the AA-passing deep gold. */
.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}

/* "Wordmark" treatment — same tracking as the AUREUM | MOBILITY lockup */
.wordmark {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}

/* Editorial serif — for pull quotes and "Gold Economy"-style highlights */
.serif {
  font-family: var(--font-serif);
  font-weight: 400;
  font-style: italic;
  letter-spacing: 0;
}

/* Monospace — for data tables, code, tail numbers */
code, kbd, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
  letter-spacing: 0;
}

/* Stat/big-number — financials, projections */
.numeric {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
}

/* Inline gold underline — used in pitch deck to highlight key phrases */
.hl-gold {
  background-image: linear-gradient(transparent 62%, var(--aureum-gold-soft) 62%);
  padding: 0 0.05em;
}

/* ───────────────────────────────────────────────────────────────────────────
   V-NEXT — Golden-hour continuous surface (redesign 2026-06-21)
   One cinematic field: onyx -> warm-dusk -> golden-hour -> warm-light swells and
   back, blended via gradients so there are NO hard light/dark section seams.
   Warm-earth accents from brand board 04. Dark is the continuous spine; warmth
   and light arrive as swells (gradients that start and end dark), never as boxes.
   ─────────────────────────────────────────────────────────────────────────── */
:root {
  /* warm dark grounds (the golden-hour shadow spine) */
  --dusk-1: #14100B;   /* warm near-black — the continuous field */
  --dusk-2: #1E1813;
  --dusk-3: #2A2018;   /* deep golden-brown */
  --dusk-4: #3A2C1E;
  --dusk-glow: #5A4426; /* golden-hour midtone */

  /* warm-earth accents (board 04) */
  --copper: #C57A43;        /* large/accent use */
  --copper-deep: #8A4E28;   /* deeper copper */
  --ember: #C8702E;         /* golden-hour glow accent */
  --sage: #8A9072;          /* muted sage (large/decorative) */
  --stone: #CBC1AA;         /* warm stone neutral */

  /* on-dark text (the field is dark now) */
  --tx-1: var(--champagne-50);             /* primary on dark */
  --tx-2: rgba(250, 248, 242, 0.74);       /* secondary */
  --tx-3: rgba(250, 248, 242, 0.54);       /* tertiary/meta */
  --hair-dark: rgba(250, 248, 242, 0.12);  /* hairline on dark (decorative rails/dividers) */
  --hair-dark-2: rgba(250, 248, 242, 0.22); /* stronger decorative hairline */
  --field-border: rgba(250, 248, 242, 0.40); /* interactive control boundary — AA 1.4.11 (~3.85:1 on the field) */

  /* continuous-field background (subtle warm vertical depth) */
  --field: radial-gradient(120% 80% at 50% -10%, #1b1610 0%, var(--dusk-1) 42%, #0E0B08 100%);

  /* SWELL gradients — start AND end transparent (= the dark field) so edges always
     match neighbors; only the middle warms/lightens. This is the seam-free mechanism. */
  --swell-warm:  linear-gradient(180deg, transparent 0%, rgba(90,68,38,0.55) 50%, transparent 100%);
  --swell-stone: linear-gradient(180deg, transparent 0%, rgba(203,193,170,0.10) 50%, transparent 100%);

  /* cinematic full-bleed scrims — fade to the field colour at top + bottom so
     image sections blend seamlessly into the dark spine. Text rides the lower band. */
  --scrim-cine: linear-gradient(180deg, var(--dusk-1) 0%, rgba(20,16,11,0) 22%, rgba(20,16,11,0) 50%, rgba(11,11,14,0.62) 78%, var(--dusk-1) 100%);
  --scrim-cine-left: linear-gradient(90deg, rgba(11,11,14,0.78) 0%, rgba(11,11,14,0.36) 46%, rgba(11,11,14,0) 76%);

  /* gold focus ring stays; gold text on dark uses bright gold (AA ~10:1 on dusk). */
}