/* ============================================================
   GoatX Design System — Colors & Typography
   Dark-mode first. Black canvas, electric blue accent, white type.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  /* --- Core palette ------------------------------------------------ */
  --gx-black:        #000000;   /* canvas */
  --gx-ink:          #0A0A0B;   /* surfaces slightly lifted from pure black */
  --gx-graphite:     #121316;   /* card / panel */
  --gx-steel:        #1C1E22;   /* input / divider block */
  --gx-iron:         #2A2D33;   /* border mid */
  --gx-fog:          #3F434B;   /* muted border */
  --gx-cement:       #6B7079;   /* muted text */
  --gx-silver:       #A8ADB5;   /* secondary text */
  --gx-white:        #FFFFFF;   /* primary text */

  /* --- Accent: electric blue -------------------------------------- */
  --gx-blue:         #1E6FFF;   /* primary accent */
  --gx-blue-hover:   #4589FF;   /* +15% lightness */
  --gx-blue-press:   #1559CC;   /* -12% */
  --gx-blue-glow:    rgba(30, 111, 255, 0.35);
  --gx-blue-haze:    rgba(30, 111, 255, 0.08);

  /* --- Semantic status -------------------------------------------- */
  --gx-success:      #00D98A;
  --gx-warning:      #FFB020;
  --gx-danger:       #FF3B4E;
  --gx-info:         var(--gx-blue);

  /* --- Surfaces (semantic) --------------------------------------- */
  --bg:              var(--gx-black);
  --bg-elevated:     var(--gx-graphite);
  --bg-input:        var(--gx-steel);
  --bg-overlay:      rgba(0, 0, 0, 0.72);

  /* --- Foreground (semantic) ------------------------------------- */
  --fg:              var(--gx-white);
  --fg-muted:        var(--gx-silver);
  --fg-dim:          var(--gx-cement);
  --fg-accent:       var(--gx-blue);
  --fg-on-accent:    var(--gx-white);

  /* --- Borders ---------------------------------------------------- */
  --border:          var(--gx-iron);
  --border-strong:   var(--gx-fog);
  --border-accent:   var(--gx-blue);

  /* --- Radii ------------------------------------------------------ */
  --r-none: 0;
  --r-xs:   2px;
  --r-sm:   4px;
  --r-md:   6px;
  --r-lg:   10px;
  --r-xl:   16px;
  --r-pill: 999px;

  /* --- Spacing scale (4px base) ---------------------------------- */
  --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;

  /* --- Shadows & glows (dark-mode: mostly glows, not drop shadows) */
  --shadow-sm:   0 1px 0 0 rgba(255,255,255,0.04) inset, 0 2px 6px rgba(0,0,0,0.5);
  --shadow-md:   0 1px 0 0 rgba(255,255,255,0.05) inset, 0 8px 24px rgba(0,0,0,0.6);
  --shadow-lg:   0 1px 0 0 rgba(255,255,255,0.06) inset, 0 20px 48px rgba(0,0,0,0.7);
  --glow-blue:   0 0 0 1px var(--gx-blue), 0 0 24px var(--gx-blue-glow);
  --glow-blue-sm:0 0 12px var(--gx-blue-glow);

  /* --- Typography: families -------------------------------------- */
  --font-display: 'Chakra Petch', 'Rajdhani', 'Oxanium', system-ui, sans-serif;
  --font-body:    'Space Grotesk', 'Inter', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* --- Typography: scale (semantic) ------------------------------ */
  --fs-display:  clamp(56px, 8vw, 112px);
  --fs-h1:       clamp(40px, 5vw, 64px);
  --fs-h2:       clamp(32px, 4vw, 48px);
  --fs-h3:       28px;
  --fs-h4:       22px;
  --fs-h5:       18px;
  --fs-body:     16px;
  --fs-small:    14px;
  --fs-micro:    12px;
  --fs-caps:     11px;

  --lh-tight:    1.02;
  --lh-heading:  1.12;
  --lh-body:     1.55;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-caps:   0.14em;
}

/* ============================================================
   Base element styles (use as a starter; not required)
   ============================================================ */
html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.gx-display {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
}
h1, .gx-h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h1);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
}
h2, .gx-h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-tight);
}
h3, .gx-h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h3);
  line-height: var(--lh-heading);
}
h4, .gx-h4 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h4); }
h5, .gx-h5 { font-family: var(--font-body);    font-weight: 600; font-size: var(--fs-h5); }

p, .gx-body { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--fg); }
.gx-small   { font-size: var(--fs-small); color: var(--fg-muted); }
.gx-micro   { font-size: var(--fs-micro); color: var(--fg-dim); }
.gx-caps {
  font-family: var(--font-body);
  font-size: var(--fs-caps);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--fg-muted);
}
code, .gx-code {
  font-family: var(--font-mono);
  font-size: 0.925em;
  color: var(--gx-blue);
  background: var(--gx-blue-haze);
  padding: 2px 6px;
  border-radius: var(--r-xs);
}

/* Accent treatments */
.gx-accent-x { color: var(--gx-blue); font-style: italic; }
.gx-kicker {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-caps);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--gx-blue);
}

/* Selection */
::selection { background: var(--gx-blue); color: var(--gx-white); }