/* ============================================================
   INFUSIVE — Colors & Type Tokens (self-hosted copy of the Infusive design
   system tokens, Claude Design project cd9e5eb6-3273-4012-9f68-afbf562bb21b).
   Fonts are loaded from Google Fonts via <link> in the page head, so the
   original @import line is omitted here.
   ============================================================ */

:root {
  --brand-ink:    #140C43;
  --brand-coral:  #FA7089;

  --purple-50:  #F4F1FE;
  --purple-100: #E9E2FD;
  --purple-200: #D5C7FB;
  --purple-300: #B79EF5;
  --purple-400: #9774EE;
  --purple-500: #7B4FE4;
  --purple-600: #6838D1;
  --purple-700: #552AAC;
  --purple-800: #3F2185;
  --purple-900: #29195C;
  --purple-950: #140C43;

  --coral-50:  #FFF1F3;
  --coral-100: #FFE0E5;
  --coral-200: #FFC4CD;
  --coral-300: #FF9DAC;
  --coral-400: #FA7089;
  --coral-500: #F24E6C;
  --coral-600: #DD2F54;
  --coral-700: #B61E42;

  --white:       #FFFFFF;
  --neutral-50:  #F8F8FC;
  --neutral-100: #F1F0F7;
  --neutral-200: #E5E4EF;
  --neutral-300: #D2D0E0;
  --neutral-400: #A8A5BE;
  --neutral-500: #807D97;
  --neutral-600: #5E5B74;
  --neutral-700: #464358;
  --neutral-800: #2D2B40;
  --neutral-900: #1B1930;

  --success-50:  #E8F7F0; --success-500: #169A6B; --success-700: #0E6B4A;
  --warning-50:  #FDF3E3; --warning-500: #E0972C; --warning-700: #9C6612;
  --danger-50:   #FDEBEC; --danger-500:  #E03E4F; --danger-700:  #A11F2D;
  --info-50:     #EEF0FE; --info-500:    #5468E8;

  --bg:           var(--neutral-50);
  --bg-elevated:  var(--white);
  --bg-sunken:    var(--neutral-100);
  --bg-ink:       var(--brand-ink);
  --fg-1: var(--neutral-900);
  --fg-2: var(--neutral-600);
  --fg-3: var(--neutral-500);
  --fg-on-ink:   #EDEBF7;
  --fg-on-brand: var(--white);
  --primary:        var(--purple-500);
  --primary-hover:  var(--purple-600);
  --primary-press:  var(--purple-700);
  --primary-soft:   var(--purple-50);
  --primary-soft-fg:var(--purple-700);
  --accent:         var(--coral-400);
  --accent-hover:   var(--coral-500);
  --accent-soft:    var(--coral-50);
  --border:        var(--neutral-200);
  --border-strong: var(--neutral-300);
  --ring:          color-mix(in oklch, var(--purple-500) 40%, transparent);

  --font-display: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-sans:    'Plus Jakarta Sans', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

  --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.375rem;
  --text-2xl: 1.75rem; --text-3xl: 2.25rem; --text-4xl: 3rem; --text-5xl: 4rem;
  --leading-tight: 1.1; --leading-snug: 1.25; --leading-normal: 1.5; --leading-relaxed: 1.65;
  --tracking-tight: -0.02em; --tracking-snug: -0.011em; --tracking-normal: 0; --tracking-wide: 0.04em;
  --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-extra: 800;

  --radius-xs: 6px; --radius-sm: 10px; --radius-md: 14px; --radius-lg: 20px; --radius-xl: 28px; --radius-2xl: 36px; --radius-pill: 999px;
  --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;

  --shadow-xs: 0 1px 2px rgba(20, 12, 67, 0.06);
  --shadow-sm: 0 2px 6px rgba(20, 12, 67, 0.07);
  --shadow-md: 0 8px 20px -6px rgba(20, 12, 67, 0.12);
  --shadow-lg: 0 18px 40px -12px rgba(20, 12, 67, 0.18);
  --shadow-xl: 0 32px 64px -20px rgba(20, 12, 67, 0.24);
  --shadow-brand: 0 12px 28px -8px rgba(123, 79, 228, 0.45);
  --shadow-coral: 0 12px 28px -8px rgba(250, 112, 137, 0.45);
}

.infusive-type { font-family: var(--font-sans); color: var(--fg-1); font-size: var(--text-base); line-height: var(--leading-normal); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
.infusive-type h1, .h1 { font-family: var(--font-display); font-size: var(--text-4xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); font-weight: var(--weight-extra); color: var(--fg-1); }
.infusive-type h2, .h2 { font-family: var(--font-display); font-size: var(--text-3xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); font-weight: var(--weight-bold); color: var(--fg-1); }
.infusive-type h3, .h3 { font-family: var(--font-display); font-size: var(--text-2xl); line-height: var(--leading-snug); letter-spacing: var(--tracking-snug); font-weight: var(--weight-bold); color: var(--fg-1); }
.infusive-type h4, .h4 { font-family: var(--font-display); font-size: var(--text-xl); line-height: var(--leading-snug); font-weight: var(--weight-semibold); color: var(--fg-1); }
.infusive-type p, .body { font-size: var(--text-base); line-height: var(--leading-relaxed); color: var(--fg-2); }
.lead { font-size: var(--text-lg); line-height: var(--leading-relaxed); color: var(--fg-2); }
.eyebrow { font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--primary); }
.caption { font-size: var(--text-sm); color: var(--fg-3); }
code, .code, .mono { font-family: var(--font-mono); font-size: 0.92em; }