/* ============================================================
   SKYHOOP — Design Tokens  v2  (Stealth / Achromatic)
   Anduril / Palantir reference aesthetic.
   ============================================================ */

:root {
  /* ── Brand Colors ── */
  --charcoal:        #0A0A0A;   /* Deep black — primary bg */
  --white:           #FFFFFF;
  --off-white:       #E8E8E8;   /* Body text */
  --accent-blue:     #00D1FF;   /* Electric blue — reticle, live indicator */
  /* ── Legacy vars kept for compatibility ── */
  --maroon:          #2a2a2a;   /* Dark surface / border — used in animations & layout */

  /* ── Semantic Colors ── */
  --bg-primary:      #0A0A0A;
  --bg-secondary:    #141414;
  --bg-tertiary:     #0F0F0F;
  --bg-panel:        #1A1A1A;
  --bg-elevated:     #222222;
  --bg-floating:     #2A2A2A;

  --text-primary:    #FFFFFF;
  --text-secondary:  #999999;
  --text-muted:      #555555;
  --text-dim:        #333333;

  --border-subtle:   rgba(255, 255, 255, 0.06);
  --border-strong:   rgba(255, 255, 255, 0.14);
  --border-accent:   rgba(0, 209, 255, 0.25);

  /* ── Typography ── */
  --font-display:    "Cranny", "Palatino Linotype", "Book Antiqua", Palatino, serif;
  --font-primary:    "ABC Diatype", Verdana, Geneva, sans-serif;
  --font-mono:       "JetBrains Mono", "Courier New", Courier, monospace;

  /* ── Font Scale ── */
  --text-xs:   0.6875rem;   /* 11px */
  --text-sm:   0.8125rem;   /* 13px */
  --text-base: 1rem;        /* 16px */
  --text-lg:   1.125rem;    /* 18px */
  --text-xl:   1.375rem;    /* 22px */
  --text-2xl:  1.75rem;     /* 28px */
  --text-3xl:  2.25rem;     /* 36px */
  --text-4xl:  3rem;        /* 48px */
  --text-5xl:  4rem;        /* 64px */
  --text-6xl:  5.5rem;      /* 88px */

  /* ── Spacing Scale (4px base) ── */
  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-5:   1.25rem;
  --space-6:   1.5rem;
  --space-8:   2rem;
  --space-10:  2.5rem;
  --space-12:  3rem;
  --space-16:  4rem;
  --space-20:  5rem;
  --space-24:  6rem;
  --space-32:  8rem;
  --space-40:  10rem;

  /* ── Border Radius ── */
  --radius-sm:   2px;
  --radius-md:   4px;
  --radius-lg:   8px;
  --radius-xl:   12px;

  /* ── Shadows (layered, ambient stealth — anti-generic) ── */
  --shadow-card:
    0 1px 1px rgba(0, 0, 0, 0.5),
    0 4px 12px rgba(0, 0, 0, 0.7),
    0 12px 32px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(0, 209, 255, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);

  --shadow-card-hover:
    0 2px 4px rgba(0, 209, 255, 0.08),
    0 8px 24px rgba(0, 0, 0, 0.85),
    0 20px 48px rgba(0, 0, 0, 0.7),
    0 0 40px rgba(0, 209, 255, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);

  /* White button: subtle lift shadow */
  --shadow-btn:
    0 1px 2px rgba(0, 0, 0, 0.4),
    0 4px 16px rgba(255, 255, 255, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);

  --shadow-btn-hover:
    0 2px 8px rgba(255, 255, 255, 0.15),
    0 8px 24px rgba(255, 255, 255, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 1);

  --shadow-nav:
    0 1px 0 rgba(255, 255, 255, 0.04),
    0 4px 24px rgba(0, 0, 0, 0.8);

  --shadow-panel:
    0 0 0 1px rgba(255, 255, 255, 0.06),
    0 8px 32px rgba(0, 0, 0, 0.9),
    0 2px 8px rgba(0, 0, 0, 0.6);

  /* ── Motion ── */
  --ease-out-expo:   cubic-bezier(.19, 1, .22, 1);
  --ease-spring:     cubic-bezier(.34, 1.56, .64, 1);
  --ease-in-out:     cubic-bezier(.4, 0, .2, 1);

  --duration-fast:   200ms;
  --duration-base:   350ms;
  --duration-slow:   600ms;
  --duration-enter:  800ms;

  /* ── Layout ── */
  --container-max:   1200px;
  --container-wide:  1400px;
  --nav-height:      68px;
  --section-pad-y:   var(--space-24);
}

/* ── Responsive token overrides ── */
@media (max-width: 768px) {
  :root {
    --text-6xl: 3.25rem;
    --text-5xl: 2.5rem;
    --text-4xl: 2rem;
    --section-pad-y: var(--space-16);
  }
}