/* =========================================================
   SPARC — Colors & Type tokens
   Cool on the surface, warm underneath.
   ========================================================= */

@font-face {
  font-family: 'ITC Avant Garde Gothic';
  src: url('fonts/ITC_Avant_Garde_Gothic_Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'ITC Avant Garde Gothic';
  src: url('fonts/ITC_Avant_Garde_Gothic_CE_Demi.otf') format('opentype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'ITC Avant Garde Gothic';
  src: url('fonts/ITC_Avant_Garde_Gothic_Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

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

:root {
  /* ---------- BRAND COLOURS (exact palette) ---------- */
  --sparc-atomic-black: #0f0e0e;
  --sparc-ecru-white:   #f9f2e2;
  --sparc-orange:       #f58023;   /* Orange Passion */
  --sparc-torch-red:    #e41e26;   /* Torch Red */
  --sparc-coastal-blue: #55a6dc;
  --sparc-fun-blue:     #145fa2;

  /* ---------- ATMOSPHERIC TINTS (derived, dark-mode only) ---------- */
  --sparc-black-2:      #161514;   /* slightly lifted surface */
  --sparc-black-3:      #1d1b1a;   /* card */
  --sparc-black-4:      #26221f;   /* hover card */
  --sparc-line:         rgba(249, 242, 226, 0.10);   /* hairline on dark */
  --sparc-line-strong:  rgba(249, 242, 226, 0.18);
  --sparc-glass:        rgba(249, 242, 226, 0.04);

  /* ---------- SEMANTIC FG / BG ---------- */
  --bg:           var(--sparc-atomic-black);
  --bg-elevated:  var(--sparc-black-2);
  --bg-card:      var(--sparc-black-3);
  --bg-card-hover:var(--sparc-black-4);
  --bg-contrast:  var(--sparc-ecru-white);   /* breathing-space sections */

  --fg:           var(--sparc-ecru-white);
  --fg-muted:     rgba(249, 242, 226, 0.66);
  --fg-faint:     rgba(249, 242, 226, 0.42);
  --fg-on-light:  var(--sparc-atomic-black);

  --accent:       var(--sparc-orange);       /* primary CTA */
  --accent-fg:    var(--sparc-atomic-black);
  --link:         var(--sparc-coastal-blue);
  --link-hover:   #7cbfe6;
  --trust:        var(--sparc-fun-blue);
  --energy:       var(--sparc-torch-red);

  --focus-ring:   var(--sparc-coastal-blue);

  /* ---------- TYPE FAMILIES ----------
     Display:  Bricolage Grotesque (variable, slight character, modern)
     UI/body:  Geist (clean, contemporary, not-Inter)
     Mono:     Geist Mono
  */
  --font-display: 'ITC Avant Garde Gothic', 'Bricolage Grotesque', system-ui, sans-serif;
  --font-body:    'Geist', 'Söhne', system-ui, sans-serif;
  --font-mono:    'Geist Mono', ui-monospace, 'JetBrains Mono', monospace;

  /* ---------- TYPE SCALE (fluid) ---------- */
  --fs-display: clamp(3.5rem, 6vw + 1rem, 7.25rem);  /* hero */
  --fs-h1: clamp(2.5rem, 3.5vw + 1rem, 4.5rem);
  --fs-h2: clamp(1.875rem, 1.6vw + 1rem, 2.75rem);
  --fs-h3: clamp(1.375rem, 0.8vw + 1rem, 1.75rem);
  --fs-h4: 1.25rem;
  --fs-body: 1rem;
  --fs-body-lg: 1.125rem;
  --fs-small: 0.875rem;
  --fs-eyebrow: 0.75rem;

  --lh-tight: 0.95;
  --lh-snug:  1.1;
  --lh-base:  1.55;
  --lh-loose: 1.7;

  --tracking-display: -0.025em;
  --tracking-h: -0.015em;
  --tracking-eyebrow: 0.14em;

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

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

  /* ---------- ELEVATION (atmospheric, glow-leaning) ---------- */
  --shadow-card: 0 1px 0 rgba(249,242,226,0.04) inset, 0 12px 30px rgba(0,0,0,0.45);
  --shadow-pop:  0 1px 0 rgba(249,242,226,0.06) inset, 0 24px 60px rgba(0,0,0,0.55);
  --glow-orange: 0 0 0 1px rgba(245,128,35,0.35), 0 18px 60px -12px rgba(245,128,35,0.55);
  --glow-blue:   0 0 0 1px rgba(85,166,220,0.35), 0 18px 60px -12px rgba(85,166,220,0.45);

  /* ---------- MOTION ---------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 140ms;
  --dur-base: 220ms;
  --dur-slow: 420ms;

  /* ---------- ATMOSPHERIC GRADIENTS (real texture files — DO NOT REPLACE) ----------
     The brand ships four grainy gradient textures. Use them as `background-image`
     with `background-size: cover`, optionally darkened with a black overlay.
     File paths are relative to the project root.
  */
  --grad-board-01: url("assets/GI_SPARC_GRADIENT_BOARD_01.jpg");  /* blue→red→white — hero / spark */
  --grad-board-03: url("assets/GI_SPARC_GRADIENT_BOARD_03.jpg");  /* blue→orange→black — momentum */
  --grad-board-04: url("assets/GI_SPARC_GRADIENT_BOARD_04.jpg");  /* red→orange→blue — ignite / cta */
  --grad-board-05: url("assets/GI_SPARC_GRADIENT_BOARD_05.jpg");  /* black→white→red — divider */

  /* Semantic aliases */
  --grad-spark:    var(--grad-board-01);
  --grad-studio:   var(--grad-board-03);
  --grad-ignite:   var(--grad-board-04);
  --grad-divider:  var(--grad-board-05);

  /* Standard darkening overlays for legibility */
  --grad-veil-strong: linear-gradient(180deg, rgba(15,14,14,0.55) 0%, rgba(15,14,14,0.85) 100%);
  --grad-veil-soft:   linear-gradient(180deg, rgba(15,14,14,0.25) 0%, rgba(15,14,14,0.65) 100%);
}

/* Helper class — apply a real SPARC gradient texture to any element */
.sparc-gradient {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.sparc-gradient--spark   { background-image: var(--grad-veil-soft), var(--grad-spark); }
.sparc-gradient--studio  { background-image: var(--grad-veil-soft), var(--grad-studio); }
.sparc-gradient--ignite  { background-image: var(--grad-veil-soft), var(--grad-ignite); }
.sparc-gradient--divider { background-image: var(--grad-veil-soft), var(--grad-divider); }

/* =========================================================
   SEMANTIC TYPE STYLES
   ========================================================= */

html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.sparc-display,
h1.display {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  font-variation-settings: "wdth" 100, "opsz" 96;
  text-wrap: balance;
}

h1, .h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h1);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-h);
  text-wrap: balance;
}

h2, .h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h2);
  line-height: 1.08;
  letter-spacing: var(--tracking-h);
  text-wrap: balance;
}

h3, .h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h3);
  line-height: 1.15;
  letter-spacing: -0.005em;
}

h4, .h4 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-h4);
  line-height: 1.3;
}

p, .body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-base);
  color: var(--fg);
  text-wrap: pretty;
}

.body-lg { font-size: var(--fs-body-lg); line-height: 1.6; color: var(--fg-muted); }
.body-muted { color: var(--fg-muted); }
.small { font-size: var(--fs-small); }

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-muted);
  font-weight: 500;
}

.support-line {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  color: var(--fg-muted);
}

code, .mono {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

a {
  color: var(--link);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--link-hover); }

::selection {
  background: var(--sparc-orange);
  color: var(--sparc-atomic-black);
}

/* Focus ring — accessible, brand-coloured */
:where(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Subtle film grain — overlay any surface that uses --grad-* */
.sparc-grain {
  position: relative;
  isolation: isolate;
}
.sparc-grain::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.18;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  z-index: 1;
}