/* ============================================================
   GFC Design System — Core tokens
   Dark-mode first. Import this in every artifact.
   ============================================================ */

/* ---------- Fonts ---------- */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800;900&family=Space+Grotesk:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ================== COLORS ================== */

  /* Brand primaries (from brand sheet) */
  --gfc-cyan:    #00E5FF;
  --gfc-violet:  #7B2CFF;
  --gfc-magenta: #FF2BD1;
  --gfc-amber:   #FFB800;

  /* Secondary tints */
  --gfc-cyan-soft:    #33EEFF;
  --gfc-violet-soft:  #9D5BFF;
  --gfc-magenta-soft: #FF5CDC;
  --gfc-amber-soft:   #FFC733;

  /* Neutrals (from brand sheet) */
  --gfc-black:    #0B0B0F;   /* page background */
  --gfc-ink:      #1A1A22;   /* surface */
  --gfc-steel:    #2A2A33;   /* raised surface / border */
  --gfc-slate:    #3A3A45;   /* hover border */
  --gfc-dim:      #55555A;   /* muted */
  --gfc-gray:     #8A8A94;   /* subdued text */
  --gfc-light:    #AAAAAA;   /* secondary text */
  --gfc-mist:     #D4D4DC;   /* near-white */
  --gfc-white:    #FFFFFF;

  /* ================== SEMANTIC ================== */
  --bg:            var(--gfc-black);
  --bg-elev-1:     var(--gfc-ink);
  --bg-elev-2:     var(--gfc-steel);
  --bg-glass:      rgba(26, 26, 34, 0.6);
  --bg-glass-hi:   rgba(42, 42, 51, 0.5);

  --fg:            var(--gfc-white);
  --fg-1:          var(--gfc-white);        /* primary text */
  --fg-2:          var(--gfc-mist);         /* secondary */
  --fg-3:          var(--gfc-light);        /* tertiary / meta */
  --fg-4:          var(--gfc-gray);         /* disabled / hint */

  --border:        rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.16);
  --border-neon:   rgba(0, 229, 255, 0.5);

  --accent:            var(--gfc-cyan);
  --accent-contrast:   var(--gfc-black);
  --accent-2:          var(--gfc-violet);
  --accent-3:          var(--gfc-magenta);
  --accent-4:          var(--gfc-amber);

  /* Status */
  --success:       #22E39A;
  --warning:       var(--gfc-amber);
  --danger:        #FF3D6E;
  --info:          var(--gfc-cyan);

  /* ================== SIGNATURE GRADIENTS ================== */
  --grad-hero: linear-gradient(90deg, #00E5FF 0%, #7B2CFF 40%, #FF2BD1 75%, #FFB800 100%);
  --grad-hero-soft: linear-gradient(90deg, rgba(0,229,255,.15), rgba(123,44,255,.15) 40%, rgba(255,43,209,.15) 75%, rgba(255,184,0,.15));
  --grad-violet-magenta: linear-gradient(135deg, #7B2CFF 0%, #FF2BD1 100%);
  --grad-cyan-violet:    linear-gradient(135deg, #00E5FF 0%, #7B2CFF 100%);
  --grad-magenta-amber:  linear-gradient(135deg, #FF2BD1 0%, #FFB800 100%);
  --grad-radial-glow:    radial-gradient(circle at 50% 0%, rgba(123,44,255,.35), transparent 60%);
  --grad-deep-space:     radial-gradient(ellipse at top, #1A1A33 0%, #0B0B0F 60%);

  /* ================== GLOW SYSTEM (tiers) ================== */
  --glow-xs-cyan:    0 0 6px rgba(0, 229, 255, 0.45);
  --glow-sm-cyan:    0 0 14px rgba(0, 229, 255, 0.5);
  --glow-md-cyan:    0 0 24px rgba(0, 229, 255, 0.55), 0 0 48px rgba(0, 229, 255, 0.25);
  --glow-lg-cyan:    0 0 40px rgba(0, 229, 255, 0.6), 0 0 80px rgba(0, 229, 255, 0.3);

  --glow-sm-violet:  0 0 14px rgba(123, 44, 255, 0.55);
  --glow-md-violet:  0 0 24px rgba(123, 44, 255, 0.6), 0 0 48px rgba(123, 44, 255, 0.3);

  --glow-sm-magenta: 0 0 14px rgba(255, 43, 209, 0.55);
  --glow-md-magenta: 0 0 24px rgba(255, 43, 209, 0.6), 0 0 48px rgba(255, 43, 209, 0.3);

  --glow-sm-amber:   0 0 14px rgba(255, 184, 0, 0.5);
  --glow-md-amber:   0 0 24px rgba(255, 184, 0, 0.55), 0 0 48px rgba(255, 184, 0, 0.25);

  /* Neon edges for cards */
  --edge-cyan:    inset 0 0 0 1px rgba(0, 229, 255, 0.4), 0 0 20px rgba(0, 229, 255, 0.15);
  --edge-violet:  inset 0 0 0 1px rgba(123, 44, 255, 0.4), 0 0 20px rgba(123, 44, 255, 0.15);
  --edge-magenta: inset 0 0 0 1px rgba(255, 43, 209, 0.4), 0 0 20px rgba(255, 43, 209, 0.15);

  /* ================== SHADOWS (layered depth) ================== */
  --shadow-1: 0 1px 0 rgba(255,255,255,.04) inset, 0 2px 6px rgba(0,0,0,.4);
  --shadow-2: 0 1px 0 rgba(255,255,255,.04) inset, 0 6px 16px rgba(0,0,0,.5);
  --shadow-3: 0 1px 0 rgba(255,255,255,.04) inset, 0 16px 40px rgba(0,0,0,.6);
  --shadow-4: 0 24px 80px rgba(0,0,0,.7);

  /* ================== TYPOGRAPHY ================== */
  --font-display: 'Orbitron', 'Eurostile', 'Space Grotesk', system-ui, sans-serif;
  --font-sans:    'Space Grotesk', 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', Menlo, monospace;

  /* Display sizes (Orbitron) - generous tracking, uppercase by default */
  --display-xl:  clamp(3.5rem, 7vw, 5.5rem);   /* hero */
  --display-lg:  clamp(2.5rem, 5vw, 3.75rem);  /* section heroes */
  --display-md:  2.5rem;
  --display-sm:  1.75rem;

  /* Body sizes (Space Grotesk) */
  --text-xs:   0.75rem;    /* 12 */
  --text-sm:   0.875rem;   /* 14 */
  --text-base: 1rem;       /* 16 */
  --text-md:   1.125rem;   /* 18 */
  --text-lg:   1.25rem;    /* 20 */
  --text-xl:   1.5rem;     /* 24 */
  --text-2xl:  1.875rem;   /* 30 */
  --text-3xl:  2.25rem;    /* 36 */

  /* Tracking — Orbitron looks best wide */
  --track-display: 0.18em;
  --track-wide:    0.08em;
  --track-normal:  0.01em;
  --track-tight:   -0.01em;

  /* Line-height */
  --lh-tight: 1.05;
  --lh-snug:  1.25;
  --lh-base:  1.55;
  --lh-loose: 1.75;

  /* Weights */
  --w-light:    300;
  --w-regular:  400;
  --w-medium:   500;
  --w-semi:     600;
  --w-bold:     700;
  --w-black:    800;

  /* ================== SPACING (8pt grid) ================== */
  --sp-0: 0;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --sp-10: 128px;

  /* ================== RADII ================== */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-2xl: 28px;
  --r-pill: 999px;

  /* ================== MOTION ================== */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);      /* premium, decelerating */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);   /* subtle bounce for toggles */
  --dur-fast:    150ms;
  --dur-base:    240ms;
  --dur-slow:    480ms;
  --dur-scene:   900ms;
}

/* ============================================================
   Base element styles — use these as a reset/starter
   ============================================================ */
html, body {
  background: var(--bg);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'ss01', 'cv01';
}

/* Utility classes ------------------------------------------------ */
.gfc-display {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  letter-spacing: var(--track-display);
  text-transform: uppercase;
  line-height: var(--lh-tight);
}
.gfc-mono { font-family: var(--font-mono); letter-spacing: var(--track-normal); }

.gfc-eyebrow {
  font-family: var(--font-display);
  font-weight: var(--w-medium);
  font-size: var(--text-xs);
  letter-spacing: var(--track-display);
  text-transform: uppercase;
  color: var(--fg-3);
}

.gfc-gradient-text {
  background: var(--grad-hero);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.gfc-glow-text-cyan    { text-shadow: var(--glow-sm-cyan); }
.gfc-glow-text-violet  { text-shadow: var(--glow-sm-violet); }
.gfc-glow-text-magenta { text-shadow: var(--glow-sm-magenta); }

/* Semantic heading presets */
h1, .h1 {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: var(--display-lg);
  letter-spacing: var(--track-display);
  text-transform: uppercase;
  line-height: var(--lh-tight);
  margin: 0;
}
h2, .h2 {
  font-family: var(--font-display);
  font-weight: var(--w-semi);
  font-size: var(--display-md);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  line-height: var(--lh-snug);
  margin: 0;
}
h3, .h3 {
  font-family: var(--font-sans);
  font-weight: var(--w-semi);
  font-size: var(--text-2xl);
  letter-spacing: var(--track-tight);
  line-height: var(--lh-snug);
  margin: 0;
}
h4, .h4 {
  font-family: var(--font-sans);
  font-weight: var(--w-medium);
  font-size: var(--text-lg);
  letter-spacing: var(--track-normal);
  line-height: var(--lh-snug);
  margin: 0;
}
p  { margin: 0; color: var(--fg-2); font-size: var(--text-base); line-height: var(--lh-base); }
small { font-size: var(--text-sm); color: var(--fg-3); }
code, kbd, pre {
  font-family: var(--font-mono);
  font-size: 0.92em;
  color: var(--gfc-cyan);
  background: rgba(0, 229, 255, 0.08);
  border: 1px solid rgba(0, 229, 255, 0.18);
  border-radius: var(--r-xs);
  padding: 0.1em 0.35em;
}
a {
  color: var(--gfc-cyan);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out), text-shadow var(--dur-fast) var(--ease-out);
}
a:hover { text-shadow: var(--glow-xs-cyan); }

hr {
  border: none;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-strong), transparent);
}

::selection { background: rgba(0, 229, 255, 0.35); color: var(--fg-1); }