/**
 * Circulairs Design System — CSS custom properties
 * Source: circulairs-ios/Circulairs Design System/tokens.generated.css
 * Keep in sync with design system when tokens change.
 */

:root {
  --color-black-4: #0A000000;
  --color-black-8: #14000000;
  --color-black-12: #1F000000;
  --color-black-16: #29000000;
  --color-black-20: #33000000;
  --color-black-24: #3D000000;
  --color-black-28: #47000000;
  --color-black-32: #52000000;
  --color-black-36: #5C000000;
  --color-black-40: #66000000;
  --color-black-44: #70000000;
  --color-black-48: #7A000000;
  --color-black-52: #85000000;
  --color-black-56: #8F000000;
  --color-black-60: #99000000;
  --color-black-64: #A3000000;
  --color-black-68: #AD000000;
  --color-black-72: #B8000000;
  --color-black-76: #C2000000;
  --color-black-80: #CC000000;
  --color-neutral-0: #ffffff;
  --color-neutral-10: #f7f4f3;
  --color-neutral-20: #f0f0f0;
  --color-neutral-40: #dce1db;
  --color-neutral-60: #9a9a9a;
  --color-neutral-80: #4a4a4a;
  --color-neutral-100: #1a1918;
  --color-brand-50: #dce0ff;
  --color-brand-500: #3341ff;
  --color-brand-600: #2d38ff;
  --color-fg-default: #1a1918;
  --color-fg-brand: #3341ff;
  --color-fg-inverted: #ffffff;
  --color-bg-default: #ffffff;
  --color-bg-brand: #3341ff;
  --color-bg-neutral: #1a1918;
  --color-border-default: #1a19183d;
  --color-border-subtle: #1a191814;
}

:root {
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-lg: 16px;
  --spacing-xl: 20px;
  --spacing-2xl: 24px;
  --spacing-3xl: 32px;
  --spacing-4xl: 48px;
}

:root {
  --radius-sm: 12px;
  --radius-md: 24px;
  --radius-lg: 48px;
}

:root {
  --font-size-display-md: 40px;
  --font-family-display-md: Fraunces, serif;
  --font-size-title-md: 24px;
  --font-family-title-md: Fraunces, serif;
  --font-size-title-sm: 20px;
  --font-family-title-sm: Fraunces, serif;
  --font-size-body-md: 16px;
  --font-family-body-md: 'Work Sans', sans-serif;
  --font-weight-body-md: 500;
  --font-size-body-sm: 14px;
  --font-family-body-sm: 'Work Sans', sans-serif;
  --font-weight-body-sm: 500;
  --font-size-headline: 17px;
  --font-family-headline: 'Work Sans', sans-serif;
  --font-weight-headline: 600;
  --font-size-caption: 12px;
  --font-family-caption: 'Work Sans', sans-serif;
  --font-weight-caption: 400;
}

:root {
  --button-height: 52px;
}

/* Dark theme — landing page uses this */
[data-theme="dark"] {
  --color-neutral-0: #000000;
  --color-neutral-10: #1c1c1e;
  --color-neutral-20: #2c2c2e;
  --color-neutral-40: #3a3a3c;
  --color-neutral-60: #8e8e93;
  --color-neutral-80: #c7c7cc;
  --color-neutral-100: #f0eeeb;
  --color-brand-500: #4a5aff;
  --color-brand-600: #5a66ff;
  --color-fg-default: #f0eeeb;
  --color-fg-brand: #4a5aff;
  --color-fg-inverted: #1a1918;
  --color-bg-default: #000000;
  --color-bg-brand: #4a5aff;
  --color-bg-neutral: #2c2c2e;
  --color-border-default: #f0eeeb3d;
  --color-border-subtle: #f0eeeb14;
}