/* Design tokens: colors, fonts, spacing, radii.
   Breakpoints (used as literal values in media queries, not as custom
   properties, since CSS cannot interpolate vars into @media):
     tablet:  min-width: 768px
     desktop: min-width: 1024px */

:root {
  /* Colors - dark sections */
  --color-bg-dark: #11151f;
  --color-bg-darker: #0e1919;
  --color-card-light: rgba(17, 21, 31, 0.04);

  /* Colors - light sections */
  --color-bg-light: #ffffff;

  /* Text */
  --color-text-dark: #11151f;
  --color-text-light: #ffffff;
  --color-text-muted-on-dark: rgba(255, 255, 255, 0.7);
  --color-text-muted-on-light: #adadad;

  /* Accent */
  --color-accent: #456ee5;

  /* Typography */
  --font-heading: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Fluid type scale */
  --fs-h1: clamp(2.5rem, 6vw + 1rem, 5.5rem);
  --fs-h2: 3rem;
  --fs-h3: clamp(1.375rem, 2.5vw + 1rem, 2.25rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;

  /* Spacing scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3.5rem;
  --space-7: 7.5rem;
  --space-8: 8rem;

  /* Radii */
  --radius-card: 24px;
  --radius-pill: 32px;

  /* Container */
  --container-max: 1280px;
  --container-pad: var(--space-4);
}