/* Go Fight Win design tokens v3.1 — See The Good · Build What's Next
   Primary brand accent: Signal Orange (studio identity)
   AI-context accent: Electric Lime (reserved for AI thesis surfaces)
   Dark: Ink / Deep Graphite / Graphite / Deep Space
   Light: Paper / Warm White / Soft Stone / Clay
   Secondary: Aqua Mist / Deep Teal / Ocean Smoke
   Support: Burgundy / Rust */
:root {
  /* Primary Dark */
  --color-ink: #0B0D10;            /* Ink Black — primary background */
  --color-deep-graphite: #0A0A0A;  /* Deep Graphite — AI-context dark surfaces */
  --color-graphite: #121418;       /* Graphite — cards and surfaces */
  --color-deep-space: #151A20;     /* Deep Space — hero backgrounds */
  --color-steel-gray: #7E7E7A;     /* Steel Gray — neutral support */

  /* Primary Light */
  --color-paper: #F7F5F0;          /* Paper — primary page bg */
  --color-warm-white: #F5F5F2;     /* Warm White — alternative sections */
  --color-soft-stone: #E6E1D8;     /* Soft Stone — subtle contrast blocks */
  --color-clay: #D9D9C7;           /* Clay — warm neutral accent */
  --color-white: #FFFFFF;          /* Pure white — minimal use */

  /* Accent — primary brand (studio identity) */
  --color-signal-orange: #FF6A3D;  /* Primary CTA / studio signal */
  --color-ember: #FF8459;          /* Highlights */

  /* Accent — AI context (electric energy; reserved for AI thesis surfaces) */
  --color-electric-lime: #FF2D78;  /* AI accent — electric rose (lime retired July 2026) */
  --color-electric-lime-soft: rgba(255, 45, 120, 0.14);

  /* Secondary */
  --color-aqua-mist: #A8CACC;      /* Knowledge / data / systems */
  --color-deep-teal: #22434A;      /* Dark visualizations */
  --color-ocean-smoke: #6D8E93;    /* Supporting elements */

  /* Support */
  --color-burgundy: #5E2F2F;       /* Frontier — advanced systems */
  --color-rust: #8E4A39;           /* Supporting accents */

  /* Neutrals + lines */
  --color-line: rgba(11, 13, 16, 0.10);
  --color-line-strong: rgba(11, 13, 16, 0.18);
  --color-line-dark: rgba(247, 245, 240, 0.14);
  --color-muted: #6B6B6B;
  --color-muted-dark: rgba(247, 245, 240, 0.64);

  /* Semantic aliases — old names kept so existing CSS keeps working */
  --white: var(--color-paper);     /* Paper is the new white — warmer */
  --white-pure: var(--color-white);
  --white-soft: var(--color-warm-white);
  --cream: var(--color-paper);
  --cream-soft: var(--color-warm-white);
  --cream-deep: var(--color-soft-stone);
  --ink: var(--color-ink);
  --ink-soft: var(--color-graphite);
  --ink-mid: #2a2e34;
  --mute: var(--color-muted);
  --mute-soft: #9c9c9c;
  --hairline: var(--color-line);
  --hairline-strong: var(--color-line-strong);
  --hairline-cream: var(--color-line-dark);

  /* Orange aliases — point to new Signal Orange */
  --orange: var(--color-signal-orange);
  --orange-deep: #d95130;
  --orange-tint: var(--color-ember);
  --rust: var(--color-rust);
  --rust-deep: var(--color-burgundy);
  --rust-tint: var(--color-ember);

  /* New direct-name tokens for v3.1 use */
  --signal-orange: var(--color-signal-orange);
  --ember: var(--color-ember);
  --electric-lime: var(--color-electric-lime);          /* AI-context accent only */
  --electric-lime-soft: var(--color-electric-lime-soft);
  --aqua-mist: var(--color-aqua-mist);
  --deep-teal: var(--color-deep-teal);
  --ocean-smoke: var(--color-ocean-smoke);
  --burgundy: var(--color-burgundy);
  --paper: var(--color-paper);
  --warm-white: var(--color-warm-white);
  --soft-stone: var(--color-soft-stone);
  --clay: var(--color-clay);
  --graphite: var(--color-graphite);
  --deep-graphite: var(--color-deep-graphite);
  --deep-space: var(--color-deep-space);
  --steel-gray: var(--color-steel-gray);

  --grad-signal: radial-gradient(circle at 70% 20%, rgba(255, 106, 61, 0.32), rgba(255, 106, 61, 0) 34%),
    radial-gradient(circle at 30% 74%, rgba(34, 67, 74, 0.10), rgba(34, 67, 74, 0) 44%);
  --grad-liquid: linear-gradient(135deg, #0B0D10 0%, #151A20 50%, #FF6A3D 100%);
  --grad-paper: linear-gradient(180deg, var(--paper) 0%, var(--warm-white) 100%);

  /* Signature gradient: Orange → Burgundy → Teal. Hero visuals + cards + atmosphere only. */
  --grad-signature: linear-gradient(135deg, #FF6A3D 0%, #5E2F2F 50%, #22434A 100%);

  /* Atmospheric Orb — radial: Signal Orange center → Burgundy mid → Deep Teal outer → Ink fade */
  --grad-orb: radial-gradient(circle at center,
                #FF6A3D 0%,
                #D95F36 20%,
                #5E2F2F 45%,
                #22434A 70%,
                #0B0D10 100%);

  /* AI-context gradients — Electric Lime energy on deep graphite */
  --grad-ai-mesh: radial-gradient(at 78% 24%, rgba(255, 45, 120, 0.18) 0px, transparent 50%),
                  radial-gradient(at 22% 78%, rgba(255, 45, 120, 0.08) 0px, transparent 50%),
                  radial-gradient(at 50% 50%, rgba(126, 126, 122, 0.06) 0px, transparent 60%);
  --grad-ai-trail: linear-gradient(135deg, transparent 0%, rgba(255, 45, 120, 0.55) 38%, rgba(255, 45, 120, 0.92) 50%, rgba(255, 45, 120, 0.55) 62%, transparent 100%);
  --grad-ai-orb: radial-gradient(circle at center,
                #FF2D78 0%,
                rgba(255, 45, 120, 0.55) 20%,
                rgba(126, 126, 122, 0.4) 50%,
                #0A0A0A 100%);

  /* Editorial Studio type system v3.0 —
     Primary: Neue Montreal (Inter Tight fallback — both are tight, geometric, weighted)
     Editorial: Cormorant Garamond (Fraunces fallback — both refined italic serifs)
     Mono: JetBrains Mono — clinical labels */
  --font-sans: "Neue Montreal", "Inter Tight", "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: "Neue Montreal", "Inter Tight", "Inter", sans-serif;
  --font-serif: "Cormorant Garamond", "Fraunces", "Instrument Serif", Georgia, "Times New Roman", serif;
  --font-mono: "JetBrains Mono", "Geist Mono", "SFMono-Regular", Consolas, ui-monospace, monospace;

  /* Atmospheric meshes v3.0 — orange + burgundy + teal */
  --grad-mesh-warm: radial-gradient(at 18% 28%, rgba(255, 132, 89, 0.22) 0px, transparent 50%),
                    radial-gradient(at 78% 20%, rgba(255, 106, 61, 0.18) 0px, transparent 50%),
                    radial-gradient(at 38% 90%, rgba(94, 47, 47, 0.32) 0px, transparent 50%);
  --grad-mesh-ink:  radial-gradient(at 22% 24%, rgba(255, 106, 61, 0.28) 0px, transparent 55%),
                    radial-gradient(at 78% 30%, rgba(94, 47, 47, 0.36) 0px, transparent 55%),
                    radial-gradient(at 32% 84%, rgba(34, 67, 74, 0.32) 0px, transparent 55%);
  --grad-mesh-citrus: radial-gradient(at 12% 18%, rgba(255, 132, 89, 0.18) 0px, transparent 55%),
                      radial-gradient(at 88% 14%, rgba(255, 106, 61, 0.14) 0px, transparent 55%),
                      radial-gradient(at 50% 88%, rgba(34, 67, 74, 0.08) 0px, transparent 55%);
  --grad-mesh-cobalt: var(--grad-mesh-ink);
  --grad-mesh-teal: var(--grad-mesh-ink);

  /* Noise grain (data URI SVG) */
  --noise: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='2' seed='5'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.42 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);

  --edge: clamp(18px, 4vw, 72px);
  --section: clamp(88px, 13vw, 188px);
  --radius-sm: 8px;
  --radius-md: 18px;
  --radius-lg: 32px;
  --max: 1480px;
  --promo-h: 2.2rem;
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  overflow-x: clip;
  scroll-behavior: auto;
}

html,
body {
  margin: 0;
  padding: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-sans);
  font-feature-settings: "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  min-height: 100%;
}

body.no-scroll {
  overflow: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: -10%;
  z-index: 999;
  pointer-events: none;
  opacity: 0.08;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .42 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

img,
svg,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

button,
input {
  font: inherit;
}

button {
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

::selection {
  background: var(--ink);
  color: var(--white);
}

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