/* ============================================================
   CATALYST — Colors & Type Tokens
   Single source of truth. Import this file in every artifact.
   ============================================================ */

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

:root {
  /* -------- Core Brand Palette -------- */
  --obsidian:        #0A0A0A;   /* primary brand black */
  --graphite:        #2A2A2A;   /* secondary dark surface */
  --graphite-soft:   #1A1A1A;   /* between obsidian and graphite */
  --white:           #FFFFFF;

  /* -------- Neutrals (light surfaces) -------- */
  --neutral-0:       #FFFFFF;
  --neutral-50:      #FAFAFA;
  --neutral-100:     #F5F5F5;
  --neutral-200:     #E5E5E5;   /* default light border */
  --neutral-300:     #D4D4D4;
  --neutral-400:     #A3A3A3;
  --neutral-500:     #737373;
  --neutral-600:     #525252;
  --neutral-700:     #404040;
  --neutral-800:     #262626;
  --neutral-900:     #0A0A0A;

  /* -------- Accents (use sparingly) -------- */
  --catalyst-green:  #22C55E;   /* signature accent */
  --catalyst-green-bright: #4ADE80;
  --catalyst-green-deep:   #16A34A;

  --electric-teal:   #14B8A6;   /* circuit motif partner */
  --electric-teal-bright: #2DD4BF;
  --electric-teal-deep:   #0D9488;

  --signal-blue:     #3B82F6;   /* UI links, interactive */
  --signal-blue-bright: #60A5FA;
  --signal-blue-deep:   #2563EB;

  /* -------- Semantic (status) -------- */
  --success:         var(--catalyst-green);
  --info:            var(--signal-blue);
  --warning:         #F59E0B;
  --danger:          #EF4444;

  /* -------- Gradients (digital only) -------- */
  --grad-growth:     linear-gradient(135deg, #22C55E 0%, #14B8A6 100%);
  --grad-obsidian:   linear-gradient(135deg, #0A0A0A 0%, #2A2A2A 100%);
  --grad-circuit:    linear-gradient(135deg, #14B8A6 0%, #3B82F6 100%);

  /* -------- Foreground / Background semantic -------- */
  --fg-1:            var(--obsidian);       /* primary text */
  --fg-2:            var(--neutral-700);    /* secondary text */
  --fg-3:            var(--neutral-500);    /* muted text */
  --fg-on-dark:      var(--white);
  --fg-on-dark-2:    rgba(255,255,255,0.72);
  --fg-on-dark-3:    rgba(255,255,255,0.48);
  --fg-accent:       var(--catalyst-green);
  --fg-link:         var(--electric-teal);

  --bg-1:            var(--white);          /* primary surface */
  --bg-2:            var(--neutral-50);     /* secondary surface */
  --bg-3:            var(--neutral-100);    /* tertiary / subtle */
  --bg-inverse:      var(--obsidian);
  --bg-inverse-2:    var(--graphite);

  --border-1:        var(--neutral-200);    /* default light border */
  --border-2:        #333333;               /* default dark border */
  --border-strong:   var(--neutral-300);

  /* -------- Typography families -------- */
  --font-display:    'Sora', system-ui, -apple-system, sans-serif;     /* headings, brand */
  --font-body:       'Inter', system-ui, -apple-system, sans-serif;    /* body, UI */
  --font-mono:       'JetBrains Mono', ui-monospace, monospace;

  /* -------- Type scale (modular ~1.25) -------- */
  --fs-12: 0.75rem;
  --fs-13: 0.8125rem;
  --fs-14: 0.875rem;
  --fs-15: 0.9375rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-28: 1.75rem;
  --fs-32: 2rem;
  --fs-40: 2.5rem;
  --fs-48: 3rem;
  --fs-56: 3.5rem;
  --fs-64: 4rem;
  --fs-80: 5rem;
  --fs-96: 6rem;

  /* -------- Tracking -------- */
  --track-tight:     -0.02em;   /* large display */
  --track-normal:    0;
  --track-wide:      0.04em;
  --track-wider:     0.08em;    /* labels, eyebrows */
  --track-brand:     0.18em;    /* CATALYST wordmark */

  /* -------- Line height -------- */
  --lh-tight:        1.05;
  --lh-snug:         1.2;
  --lh-base:         1.5;
  --lh-relaxed:      1.65;

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

  /* -------- Radii -------- */
  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-2xl: 24px;
  --r-pill: 999px;

  /* -------- Shadows -------- */
  --shadow-xs: 0 1px 2px rgba(10,10,10,0.04);
  --shadow-sm: 0 1px 2px rgba(10,10,10,0.06), 0 1px 3px rgba(10,10,10,0.05);
  --shadow-md: 0 4px 12px rgba(10,10,10,0.08);
  --shadow-lg: 0 12px 32px rgba(10,10,10,0.10);
  --shadow-xl: 0 24px 60px rgba(10,10,10,0.14);

  /* Glow shadows — used on hover for primary CTA */
  --glow-green: 0 0 0 1px rgba(34,197,94,0.4), 0 8px 24px rgba(34,197,94,0.28);
  --glow-teal:  0 0 0 1px rgba(20,184,166,0.4), 0 8px 24px rgba(20,184,166,0.28);

  /* -------- Motion -------- */
  --ease-out:        cubic-bezier(0.22, 1, 0.36, 1);     /* standard reveal */
  --ease-in-out:     cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring:     cubic-bezier(0.34, 1.56, 0.64, 1);  /* sparingly */
  --dur-fast:        120ms;
  --dur-base:        200ms;
  --dur-slow:        360ms;

  /* -------- Layout -------- */
  --maxw-prose:      640px;
  --maxw-content:    1120px;
  --maxw-wide:       1280px;
}

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

.h-display {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(3rem, 7vw, var(--fs-96));
  line-height: var(--lh-tight);
  letter-spacing: var(--track-tight);
  color: var(--fg-1);
}

.h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-56);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-tight);
  color: var(--fg-1);
}

.h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-40);
  line-height: var(--lh-snug);
  letter-spacing: var(--track-tight);
  color: var(--fg-1);
}

.h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-28);
  line-height: var(--lh-snug);
  letter-spacing: -0.01em;
  color: var(--fg-1);
}

.h4 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-20);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

.eyebrow {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-12);
  letter-spacing: var(--track-wider);
  text-transform: uppercase;
  color: var(--fg-3);
}

.brand-mark {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: var(--track-brand);
  text-transform: uppercase;
}

.p-lead {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-20);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
}

.p {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-16);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
}

.p-sm {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-14);
  line-height: var(--lh-base);
  color: var(--fg-2);
}

.label {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-13);
  letter-spacing: 0.01em;
  color: var(--fg-1);
}

.caption {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-12);
  line-height: var(--lh-base);
  color: var(--fg-3);
}

.code {
  font-family: var(--font-mono);
  font-size: var(--fs-13);
  color: var(--fg-1);
  background: var(--neutral-100);
  padding: 2px 6px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border-1);
}

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