@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@300;400;500;700&family=Barlow+Condensed:wght@700;800&family=Fraunces:opsz,wght,SOFT,WONK@9..144,400,0,1&display=swap');

:root {
  /* Brand colors from Figma */
  --ds-color-primary-700: #1a35d4;
  --ds-color-primary-600: #1637d6;
  --ds-color-primary-100: #dbe4ff;
  --ds-color-accent-pink: #e8185a;
  --ds-color-accent-gold: #f0b429;
  --ds-color-accent-cyan: #00c8d7;

  /* Neutrals */
  --ds-color-ink-900: #0a0f2c;
  --ds-color-ink-700: #444444;
  --ds-color-ink-500: #6b7280;
  --ds-color-surface: #ffffff;
  --ds-color-surface-soft: #f4f5fa;
  --ds-color-border-subtle: rgba(26, 53, 212, 0.2);

  /* Typography */
  --ds-font-display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --ds-font-body: "Barlow", sans-serif;
  --ds-font-script: "Fraunces", Georgia, serif;

  --ds-text-hero: clamp(2.5rem, 7vw, 5.5rem);
  --ds-text-h1: clamp(2.1rem, 4.8vw, 3.875rem);
  --ds-text-h2: clamp(1.6rem, 3.6vw, 3.125rem);
  --ds-text-h3: 1.25rem;
  --ds-text-body-lg: 1.0625rem;
  --ds-text-body: 1rem;
  --ds-text-small: 0.875rem;
  --ds-text-overline: 0.6875rem;

  --ds-leading-tight: 1;
  --ds-leading-display: 0.95;
  --ds-leading-copy: 1.7;

  --ds-tracking-display: -0.02em;
  --ds-tracking-overline: 0.22em;
  --ds-tracking-button: 0.08em;

  /* Spacing scale */
  --ds-space-1: 0.25rem;
  --ds-space-2: 0.5rem;
  --ds-space-3: 0.75rem;
  --ds-space-4: 1rem;
  --ds-space-5: 1.25rem;
  --ds-space-6: 1.5rem;
  --ds-space-8: 2rem;
  --ds-space-10: 2.5rem;
  --ds-space-12: 3rem;
  --ds-space-16: 4rem;
  --ds-space-20: 5rem;

  /* Geometry */
  --ds-radius-xs: 0.25rem;
  --ds-radius-sm: 0.5rem;
  --ds-radius-md: 1rem;
  --ds-radius-lg: 1.25rem;
  --ds-radius-xl: 2.5rem;
  --ds-radius-pill: 999px;

  /* Elevation */
  --ds-shadow-card: 0 4px 34px rgba(0, 0, 0, 0.14);
  --ds-shadow-frame: -24px 22px 0 var(--ds-color-primary-700);

  /* Layout */
  --ds-container-max: 82rem;
  --ds-section-gap: clamp(4rem, 8vw, 7rem);
}