/* ============================================================
   IGNITE PRODUCTIONS — Design tokens
   ============================================================
   Fonts loaded from Google Fonts. If you have licensed
   originals, swap the @import below for local @font-face rules
   pointing at fonts/.
   ------------------------------------------------------------ */

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

:root {
  /* -------------------- COLOR: CORE ------------------------- */
  /* Dark ground — the default surface. Ignite lives in the dark. */
  --ink-000: #0A0B0D;   /* page background, max black-navy */
  --ink-100: #111317;   /* elevated panel */
  --ink-200: #1A1D23;   /* card */
  --ink-300: #242830;   /* raised card, inputs */
  --ink-400: #2F343E;   /* borders on dark */
  --ink-500: #3A4050;   /* muted dividers */

  /* Paper — inverse surfaces for light sections */
  --paper-000: #FAFAF7;  /* off-white page */
  --paper-100: #F0EFE9;  /* light panel */
  --paper-200: #E4E2D8;  /* borders, dividers */

  /* Foreground */
  --fg-1: #FAFAF7;       /* primary text on dark */
  --fg-2: #B8BCC5;       /* secondary text on dark */
  --fg-3: #9499A3;       /* tertiary / meta on dark — bumped to 6.5:1 AAA (was #7A7F8B = 4.3:1) */
  --fg-4: #6B7080;       /* disabled / very quiet — 3.4:1 (large-text / UI-state only) */

  --fg-1-inv: #0A0B0D;   /* primary on light */
  --fg-2-inv: #3A4050;   /* secondary on light */
  --fg-3-inv: #7A7F8B;   /* tertiary on light */

  /* -------------------- COLOR: BRAND ------------------------ */
  /* Spark — the electric lime from the Spark pixel logomark. */
  --spark-500: #D6F35F;   /* primary Spark accent */
  --spark-400: #E2F785;
  --spark-600: #B8D43E;
  --spark-700: #8FA72D;
  --spark-glow: rgba(214, 243, 95, 0.35);

  /* Ignite — fire-adjacent orange for the parent agency brand. */
  --ignite-500: #FF5A1F;   /* primary Ignite accent */
  --ignite-400: #FF7A47;
  --ignite-600: #E04510;
  --ignite-700: #B83206;
  --ember-500: #FFB627;    /* warm amber highlight */

  /* -------------------- COLOR: SEMANTIC --------------------- */
  --success: #6BE486;
  --warn: #FFB627;
  --danger: #FF4D4D;
  --info: #5AB8FF;

  /* Live / real-time indicator */
  --live: #FF4D4D;

  /* -------------------- TYPE -------------------------------- */
  /* Display — Space Grotesk: confident geometric sans, slight warmth. */
  --font-display: 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
  /* Body — Inter: workhorse sans for dense UI. */
  --font-body: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  /* Mono — JetBrains Mono: ops/tactical labels, ASCII markup. */
  --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;
  /* Stencil — Bungee: veteran-owned stencil nod. Use SPARINGLY. */
  --font-stencil: 'Bungee', 'Impact', sans-serif;

  /* Type scale — tight, punchy, field-ready */
  --t-display-xl: clamp(72px, 10vw, 144px);   /* hero slabs */
  --t-display-l:  clamp(56px, 7vw, 96px);
  --t-display-m:  clamp(40px, 5vw, 64px);
  --t-display-s:  32px;
  --t-h1: 44px;
  --t-h2: 32px;
  --t-h3: 22px;
  --t-h4: 18px;
  --t-body-l: 18px;
  --t-body:   16px;
  --t-body-s: 14px;
  --t-caption: 13px;
  --t-eyebrow: 12px;   /* letter-spaced monospace labels */
  --t-micro:   11px;

  --lh-tight:  1.05;
  --lh-snug:   1.2;
  --lh-body:   1.55;
  --lh-loose:  1.7;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.08em;
  --tracking-ops: 0.22em;   /* the letter-spaced "OPS" labels */

  /* -------------------- SPACING ----------------------------- */
  /* 4-point base. */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;
  --s-24: 96px;
  --s-32: 128px;

  /* -------------------- RADII ------------------------------- */
  /* Slightly generous, but never pill-soft. */
  --r-1: 4px;
  --r-2: 8px;
  --r-3: 12px;
  --r-4: 16px;
  --r-5: 20px;
  --r-6: 28px;
  --r-pill: 999px;

  /* -------------------- SHADOW ------------------------------ */
  /* On dark, shadows are subtle; real depth comes from borders + chroma glow. */
  --shadow-1: 0 1px 0 rgba(255,255,255,0.04) inset, 0 1px 2px rgba(0,0,0,0.4);
  --shadow-2: 0 4px 16px rgba(0,0,0,0.4), 0 1px 0 rgba(255,255,255,0.04) inset;
  --shadow-3: 0 16px 48px rgba(0,0,0,0.55), 0 1px 0 rgba(255,255,255,0.06) inset;
  --glow-spark: 0 0 0 1px rgba(214,243,95,0.3), 0 8px 32px rgba(214,243,95,0.18);
  --glow-ignite: 0 0 0 1px rgba(255,90,31,0.3), 0 8px 32px rgba(255,90,31,0.18);

  /* -------------------- BORDERS ----------------------------- */
  --border-1: 1px solid var(--ink-400);
  --border-2: 1px solid var(--ink-300);
  --border-hair: 1px solid rgba(255,255,255,0.06);

  /* -------------------- MOTION ------------------------------ */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 360ms;

  /* -------------------- GRID -------------------------------- */
  --grid-max: 1280px;
  --grid-gutter: 24px;
}

/* ============================================================
   SEMANTIC ELEMENT DEFAULTS
   ============================================================ */

html, body {
  background: var(--ink-000);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Headings default to display type — confident, not corporate */
h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-tight);
  margin: 0;
}
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); font-weight: 600; }
h4 { font-size: var(--t-h4); }

p  { margin: 0; }

code, pre, kbd {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

/* Monospace eyebrow — the letter-spaced tactical label everywhere in the brand */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--t-eyebrow);
  font-weight: 500;
  letter-spacing: var(--tracking-ops);
  text-transform: uppercase;
  color: var(--fg-3);
}
.eyebrow--spark { color: var(--spark-500); }
.eyebrow--ignite { color: var(--ignite-500); }

/* The ASCII bracket syntax — < ... > — used as pull-quote framing */
.bracket-quote::before { content: '< '; color: var(--spark-500); }
.bracket-quote::after  { content: ' >'; color: var(--spark-500); }

/* Chevron marker — >> — used as section starts */
.chevron::before { content: '>> '; color: var(--spark-500); font-family: var(--font-mono); }

/* Asterisk marker — * — used as footnote/accent */
.asterisk { color: var(--spark-500); font-family: var(--font-mono); }