/* ============================================================
   TOKENS — design system custom properties
   ============================================================ */
:root {
  /* Color */
  --c-bg:            #08090D;
  --c-surface:       #0F1016;
  --c-surface2:      #141520;
  --c-accent:        #FF3C00;
  --c-teal:          #00C9A7;
  --c-gold:          #FFA623;
  --c-white:         #FFFFFF;
  --c-text:          #F0F0F0;
  --c-muted:         rgba(240, 240, 240, 0.45);
  --c-border:        rgba(255, 255, 255, 0.07);
  --c-border-accent: rgba(255, 60, 0, 0.30);

  /* Motion */
  --transition: 200ms ease;

  /* Layout */
  --nav-height: 64px;

  /* Radius */
  --radius-card: 6px;
  --radius-btn:  3px;
  --radius-tag:  2px;
}

/* Base document */
html {
  background: var(--c-bg);
}

body {
  background: var(--c-bg);
  color: var(--c-text);
  font-family: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.65;
}

/* Type primitives */
.font-display {
  font-family: "Barlow Condensed", "Barlow", sans-serif;
  text-transform: uppercase;
}

/* ============================================================
   MODERN 2025 DESIGN TOKENS
   ============================================================ */
:root {
  /* Gradients */
  --grad-accent: linear-gradient(135deg, #FF6A00 0%, #FF3C00 45%, #FFA623 100%);
  --grad-accent-rev: linear-gradient(135deg, #FFA623 0%, #FF3C00 55%, #FF6A00 100%);
  --grad-text: linear-gradient(120deg, #FFFFFF 0%, #FFD9C7 40%, #FF6A00 100%);
  --grad-hairline: linear-gradient(90deg, transparent, rgba(255,60,0,0.5), transparent);
  --grad-surface: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0));

  /* Glows + shadows (colored, layered depth) */
  --glow-accent: 0 0 0 1px rgba(255,60,0,0.35), 0 12px 40px -8px rgba(255,60,0,0.45);
  --glow-accent-soft: 0 8px 30px -10px rgba(255,60,0,0.35);
  --glow-teal: 0 0 24px -4px rgba(0,201,167,0.5);
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.4);
  --shadow-md: 0 12px 32px -8px rgba(0,0,0,0.55);
  --shadow-lg: 0 30px 70px -20px rgba(0,0,0,0.7);
  --ring: 0 0 0 1px var(--c-border);

  /* Motion */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --transition-slow: 400ms var(--ease-out-expo);

  /* Radius (engineered, not soft-SaaS) */
  --radius-card: 10px;
  --radius-btn: 8px;
  --radius-lg: 18px;
  --radius-pill: 999px;

  /* Technical / HUD monospace layer */
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", "Cascadia Code", Menlo, Consolas, monospace;

  /* Warm-biased ink (chosen neutral, not generic cool near-black) */
  --c-ink: #0A0806;
  --c-scan: rgba(255, 60, 0, 0.03);
}