/* ────────────────────────────────────────────────────────────────
   AUAV — Design tokens · v0.2
   AdvancedUAV Tech · company-wide system
   Dark by default. Gradient is the brand.
   ──────────────────────────────────────────────────────────────── */

/* Fonts — Geist only (one face, multiple weights). Self-hosted from /fonts. */
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/Geist-VariableFont_wght.ttf") format("truetype-variations"),
       url("../fonts/Geist-VariableFont_wght.ttf") format("truetype");
}
@font-face {
  font-family: "Geist";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/Geist-Italic-VariableFont_wght.ttf") format("truetype-variations"),
       url("../fonts/Geist-Italic-VariableFont_wght.ttf") format("truetype");
}

:root {
  /* ── BRAND · solid red, with a coral glow as the signature touch ── */
  --brand-red:    #FF2236;
  --brand-red-700: #C21222;
  --brand-red-800: #8E0B17;
  --brand-coral:  #FF7B7B;
  --brand-coral-soft: rgb(255 123 123 / 0.32);
  --brand-red-soft: rgb(255 34 54 / 0.12);
  --brand-solid: var(--brand-red);
  --brand-glow: 0 6px 16px -4px rgb(255 123 123 / 0.45),
                0 2px 8px -2px rgb(255 34 54 / 0.32);
  --brand-neutral: #393939;

  /* ── SURFACES (obsidian v0.6) ── */
  --bg-canvas: #070707;
  --bg-sunken: #0D0D0D;
  --bg-panel:  #141414;
  --bg-elevated: #1C1C1C;
  --bg-overlay:  #252525;
  --bg-glass: rgb(13 13 13 / 0.72);

  /* ── BORDERS ── */
  --border-subtle: #1F1F1F;
  --border-strong: #2F2F2F;
  --border-focus: var(--brand-red);

  /* ── TEXT ── */
  --text-primary:   #f2f4f7;
  --text-secondary: #b4bac4;
  --text-tertiary:  #7b8493;
  --text-disabled:  #4a525e;
  --text-on-brand:  #ffffff;

  /* ── STATUS ── */
  --ok:   #4ade80;
  --warn: #ffe293;
  --crit: #ff5c5c;
  --info: #5eead4;
  --zone: #c4b5fd;
  --ok-bg:   rgb(74 222 128 / 0.10);
  --warn-bg: rgb(255 226 147 / 0.10);
  --crit-bg: rgb(255 92  92  / 0.10);
  --info-bg: rgb(94 234 212 / 0.10);
  --zone-bg: rgb(196 181 253 / 0.10);

  /* ── SPACING (4px base) ── */
  --s-1: 2px;
  --s-2: 4px;
  --s-3: 6px;
  --s-4: 8px;
  --s-5: 12px;
  --s-6: 16px;
  --s-7: 20px;
  --s-8: 24px;
  --s-9: 32px;
  --s-10: 40px;
  --s-11: 48px;
  --s-12: 64px;
  --s-13: 96px;
  --s-14: 128px;

  /* ── RADII ── */
  --r-sm:  3px;
  --r-md:  6px;
  --r-lg:  8px;
  --r-xl:  12px;
  --r-2xl: 16px;
  --r-3xl: 28px;
  --r-pill: 9999px;

  /* ── ELEVATION ── */
  --shadow-1: 0 1px 0 0 rgb(255 255 255 / 0.03) inset,
              0 1px 2px 0 rgb(0 0 0 / 0.40);
  --shadow-2: 0 1px 0 0 rgb(255 255 255 / 0.03) inset,
              0 4px 12px -2px rgb(0 0 0 / 0.50),
              0 2px 4px -1px rgb(0 0 0 / 0.40);
  --shadow-3: 0 1px 0 0 rgb(255 255 255 / 0.03) inset,
              0 18px 48px -12px rgb(0 0 0 / 0.70),
              0 8px 20px -6px rgb(0 0 0 / 0.50);
  --shadow-brand: var(--brand-glow);

  /* ── MOTION ── */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms;
  --dur-base: 180ms;
  --dur-slow: 280ms;

  /* ── TYPE · families ── */
  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: var(--font-sans);
  --font-code: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ── TYPE · scale ── */
  --fs-mega: 96px;
  --fs-display: 72px;
  --fs-h1: 32px;
  --fs-h2: 24px;
  --fs-h3: 18px;
  --fs-body: 14px;
  --fs-body-sm: 13px;
  --fs-caption: 12px;
  --fs-eyebrow: 11px;
  --fs-micro: 10px;

  --lh-tight: 1.02;
  --lh-snug:  1.15;
  --lh-base:  1.45;

  --tracking-eyebrow: 0.08em;
  --tracking-display: -0.03em;
  --tracking-heading: -0.02em;
}

/* ────────────────────────────────────────────────────────────────
   Semantic helpers
   ──────────────────────────────────────────────────────────────── */

.t-mega {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-mega);
  line-height: 0.95;
  letter-spacing: -0.04em;
  color: var(--text-primary);
}
.t-display {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  color: var(--text-primary);
}
.t-display-accent,
.t-mega-accent { color: var(--brand-red); }

.t-h1 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-h1);
  line-height: 1.45;
  letter-spacing: var(--tracking-heading);
  color: var(--text-primary);
}
.t-h2 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-h2);
  line-height: 1.3;
  letter-spacing: var(--tracking-heading);
  color: var(--text-primary);
}
.t-h3 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-h3);
  line-height: 1.35;
  color: var(--text-primary);
}
.t-body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: 1.45;
  color: var(--text-secondary);
}
.t-body-sm {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-body-sm);
  line-height: 1.45;
  color: var(--text-secondary);
}
.t-caption {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-caption);
  line-height: 1.45;
  color: var(--text-tertiary);
}
.t-eyebrow {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-eyebrow);
  line-height: 1.6;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-tertiary);
  font-feature-settings: "ss01" 1;
}
.t-mono {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-caption);
  font-feature-settings: "tnum" 1, "cv11" 1;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}
.t-telemetry {
  font-family: var(--font-sans);
  font-weight: 600;
  font-feature-settings: "tnum" 1, "cv11" 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}
.t-code {
  font-family: var(--font-code);
  font-size: 11px;
  padding: 1px 6px;
  border-radius: var(--r-sm);
  background: var(--bg-canvas);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
}
.t-wordmark {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 18px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  font-feature-settings: "ss01" 1;
}
.t-wordmark-sm { font-size: 16px; }
.t-wordmark-lg { font-size: 28px; letter-spacing: -0.025em; }

.brand-tile {
  background: var(--brand-red);
  border-radius: var(--r-3xl);
  color: var(--text-on-brand);
  box-shadow: var(--brand-glow);
}
.brand-neutral {
  background: var(--brand-neutral);
  color: var(--text-on-brand);
}

html, body {
  background: var(--bg-canvas);
  color: var(--text-primary);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
* { box-sizing: border-box; }