/* =========================================================
   Swarm Design System — tokens
   Colors, type, spacing, radii, shadows, motion.
   ========================================================= */

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

:root {
  /* -------- Color: raw palette -------- */
  /* Sunset gradient stops */
  --sunset-1: #FCAF45;   /* mango */
  --sunset-2: #F77737;   /* tangerine */
  --sunset-3: #E1306C;   /* magenta */
  --sunset-4: #C13584;   /* berry */

  /* Dusk gradient stops */
  --dusk-1: #E1306C;     /* magenta (shared with sunset) */
  --dusk-2: #833AB4;     /* violet */
  --dusk-3: #5851DB;     /* indigo */
  --dusk-4: #405DE6;     /* royal */

  /* Accent */
  --sunshine: #FFDC80;

  /* Ink & paper */
  --ink: #1A1625;
  --ink-80: rgba(26, 22, 37, 0.80);
  --ink-60: rgba(26, 22, 37, 0.60);
  --ink-40: rgba(26, 22, 37, 0.40);
  --ink-20: rgba(26, 22, 37, 0.20);
  --ink-10: rgba(26, 22, 37, 0.10);

  --paper: #FDFBFF;
  --paper-90: rgba(253, 251, 255, 0.90);
  --paper-70: rgba(253, 251, 255, 0.70);
  --paper-40: rgba(253, 251, 255, 0.40);

  /* Neutrals (violet-tinted, not true gray) */
  --n-50:  #F7F5FB;
  --n-100: #EEEAF4;
  --n-200: #DED8EA;
  --n-300: #C2B9D6;
  --n-400: #9A8FB5;
  --n-500: #6F6588;
  --n-600: #4F4766;
  --n-700: #363048;
  --n-800: #22192E;
  --n-900: #120D1C;

  /* -------- Color: semantic -------- */
  --fg1: var(--ink);              /* primary text on paper */
  --fg2: var(--ink-80);           /* secondary text */
  --fg3: var(--ink-60);           /* tertiary */
  --fg-inverse: var(--paper);     /* text on gradients/ink */

  --bg: var(--paper);
  --bg-raised: #FFFFFF;           /* cards on paper */
  --bg-sunken: var(--n-50);
  --bg-ink: var(--ink);

  --accent: var(--sunshine);
  --accent-fg: var(--ink);

  --success: #2EC4A3;
  --warning: #F59E0B;
  --danger: #EF4444;

  --border: var(--ink-10);
  --border-strong: var(--ink-20);

  /* -------- Gradients -------- */
  --g-sunset: linear-gradient(135deg, var(--sunset-1) 0%, var(--sunset-2) 33%, var(--sunset-3) 66%, var(--sunset-4) 100%);
  --g-dusk:   linear-gradient(135deg, var(--dusk-1) 0%,   var(--dusk-2) 33%,   var(--dusk-3) 66%,   var(--dusk-4) 100%);
  --g-full:   linear-gradient(135deg, var(--sunset-1) 0%, var(--sunset-3) 35%, var(--dusk-2) 65%, var(--dusk-4) 100%);
  --g-radial: radial-gradient(circle at 20% 20%, var(--sunset-1) 0%, var(--sunset-3) 30%, var(--dusk-2) 60%, var(--dusk-4) 100%);

  /* -------- Type: families -------- */
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body:    'Space Grotesk', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* -------- Type: scale (rem) -------- */
  --t-xs:   0.75rem;    /* 12 */
  --t-sm:   0.875rem;   /* 14 */
  --t-base: 1rem;       /* 16 */
  --t-md:   1.125rem;   /* 18 */
  --t-lg:   1.375rem;   /* 22 */
  --t-xl:   1.75rem;    /* 28 */
  --t-2xl:  2.25rem;    /* 36 */
  --t-3xl:  3rem;       /* 48 */
  --t-4xl:  4rem;       /* 64 */
  --t-5xl:  5.5rem;     /* 88 */
  --t-6xl:  7.5rem;     /* 120 */

  /* -------- Spacing (4px grid) -------- */
  --s-0: 0;
  --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;

  /* -------- Radii -------- */
  --r-xs:   6px;
  --r-sm:   10px;
  --r-md:   16px;
  --r-lg:   24px;
  --r-xl:   32px;
  --r-2xl:  48px;
  --r-full: 999px;

  /* -------- Shadows -------- */
  --shadow-sm: 0 1px 2px rgba(26, 22, 37, 0.06);
  --shadow-md: 0 6px 20px -6px rgba(193, 53, 132, 0.15), 0 2px 6px rgba(26, 22, 37, 0.08);
  --shadow-lg: 0 24px 60px -20px rgba(131, 58, 180, 0.3), 0 8px 16px rgba(26, 22, 37, 0.08);
  --shadow-xl: 0 40px 100px -30px rgba(225, 48, 108, 0.35), 0 16px 32px rgba(26, 22, 37, 0.10);
  --shadow-inset: inset 0 2px 6px rgba(26, 22, 37, 0.12);
  --shadow-glow: 0 0 48px rgba(255, 220, 128, 0.5);

  /* -------- Motion -------- */
  --ease-out: cubic-bezier(0.2, 0.9, 0.25, 1);
  --ease-in:  cubic-bezier(0.6, 0, 0.8, 0.3);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  --dur-micro: 120ms;
  --dur-std:   240ms;
  --dur-expr:  480ms;
  --dur-swarm: 900ms;

  /* -------- Blur surface -------- */
  --blur-chrome: blur(24px) saturate(1.4);
}

/* =========================================================
   Semantic type styles — use these directly
   ========================================================= */

.h1, h1 {
  font-family: var(--font-display);
  font-size: var(--t-5xl);
  line-height: 0.95;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--fg1);
}

.h2, h2 {
  font-family: var(--font-display);
  font-size: var(--t-3xl);
  line-height: 1.0;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--fg1);
}

.h3, h3 {
  font-family: var(--font-display);
  font-size: var(--t-xl);
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--fg1);
}

.h4, h4 {
  font-family: var(--font-display);
  font-size: var(--t-lg);
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--fg1);
}

.eyebrow {
  font-family: var(--font-display);
  font-size: var(--t-xs);
  line-height: 1;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg2);
}

.lead, .p-lead {
  font-family: var(--font-body);
  font-size: var(--t-md);
  line-height: 1.5;
  font-weight: 400;
  color: var(--fg2);
}

.p, p {
  font-family: var(--font-body);
  font-size: var(--t-base);
  line-height: 1.55;
  font-weight: 400;
  color: var(--fg1);
}

.small {
  font-family: var(--font-body);
  font-size: var(--t-sm);
  line-height: 1.5;
  color: var(--fg2);
}

.caption {
  font-family: var(--font-body);
  font-size: var(--t-xs);
  line-height: 1.4;
  color: var(--fg3);
}

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

.display {
  font-family: var(--font-display);
  font-size: var(--t-6xl);
  line-height: 0.9;
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--fg1);
}

.display em, .display i {
  font-style: italic;
  font-weight: 500;
}