/* ============================================================
   RHYNO DRONE — DESIGN TOKENS
   Aesthetic: Tactical Aerospace HUD
   Carbon black · signal orange · technical monospace readouts
   ============================================================ */

:root {
  /* --- Surfaces (carbon) --- */
  --carbon-950: #060708;
  --carbon-900: #0a0c0f;   /* page base */
  --carbon-850: #0e1115;
  --carbon-800: #12151a;   /* surface */
  --carbon-700: #181c23;   /* elevated surface */
  --carbon-600: #21262f;   /* raised / hover */
  --carbon-500: #2c333d;   /* strong border */

  /* --- Hairlines --- */
  --line: rgba(255, 255, 255, 0.07);
  --line-soft: rgba(255, 255, 255, 0.04);
  --line-strong: rgba(255, 255, 255, 0.14);

  /* --- Text --- */
  --text: #eceef1;
  --text-dim: #969ca6;
  --text-faint: #878e99;
  --text-ghost: #626974;

  /* --- Signal (primary accent) --- */
  --signal: #ff5a1f;
  --signal-bright: #ff7a44;
  --signal-deep: #c2410c;
  --signal-glow: rgba(255, 90, 31, 0.40);
  --signal-wash: rgba(255, 90, 31, 0.10);
  --signal-line: rgba(255, 90, 31, 0.28);

  /* --- HUD cyan (status / sparing use) --- */
  --hud: #46e3cf;
  --hud-dim: rgba(70, 227, 207, 0.16);
  --hud-glow: rgba(70, 227, 207, 0.35);

  /* --- Functional --- */
  --warn: #ffc24b;
  --danger: #ff4d4d;

  /* --- Typography --- */
  --font-display: "Archivo", "Arial Narrow", sans-serif;
  --font-body: "IBM Plex Sans", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", monospace;

  /* Fluid type scale */
  --fs-micro: 0.8125rem;                                   /* 13px labels */
  --fs-xs: 0.78rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: clamp(1.25rem, 1.05rem + 1vw, 1.6rem);
  --fs-xl: clamp(1.6rem, 1.2rem + 2vw, 2.4rem);
  --fs-2xl: clamp(2.2rem, 1.4rem + 4vw, 3.6rem);
  --fs-display: clamp(2.8rem, 1.2rem + 8vw, 8rem);
  --fs-mega: clamp(3.6rem, 0.5rem + 13vw, 12rem);

  /* --- Spacing --- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --sp-10: 8rem;

  /* --- Geometry --- */
  --radius: 2px;
  --radius-lg: 4px;
  --tick: 10px;            /* HUD corner tick length */
  --maxw: 1320px;
  --gutter: clamp(1.25rem, 4vw, 4rem);

  /* --- Motion --- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 0.18s;
  --dur: 0.36s;
  --dur-slow: 0.7s;

  /* --- Shadow / depth --- */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 18px 50px -18px rgba(0, 0, 0, 0.8);
  --shadow-signal: 0 0 0 1px var(--signal-line), 0 10px 40px -12px var(--signal-glow);

  /* --- Z --- */
  --z-nav: 100;
  --z-overlay: 200;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}