/* Load Geist from Google Fonts */

:root {
  /* Colors */
  --color-page: #FAFAFA;
  --color-primary-foreground: #000000;
  --color-foreground-alt: #333333;
  --color-secondary-foreground: #666666;
  --color-muted-foreground: #8C8C8C;
  --color-accent-background: #F2F2F2;
  --color-separator: #D9D9D9;

  /* Typography - Desktop */
  --font-sans: 'Geist', sans-serif;

  --font-size-h1: 48px;
  --font-weight-h1: 500;
  --line-height-h1: 52.8px;
  --letter-spacing-h1: -1.44px;

  --font-size-h2: 32px;
  --font-weight-h2: 450;
  --line-height-h2: 38.4px;
  --letter-spacing-h2: -0.96px;

  --font-size-body-large: 24px;
  --font-weight-body-large: 400;
  --line-height-body-large: 31.2px;
  --letter-spacing-body-large: -0.48px;

  --font-size-body: 16px;
  --font-weight-body: 400;
  --line-height-body: 20.8px;
  --letter-spacing-body: 0px;

  --font-size-caption: 14px;
  --font-weight-caption: 400;
  --line-height-caption: 18.2px;
  --letter-spacing-caption: 1.4px;

  /* Spacing - 8pt grid */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --space-32: 128px;

  /* Layout */
  --container-max: 1200px;
  --container-padding: var(--space-8);

  /* ── Homepage additions ── */

  /* Generic weights (footer nav uses regular on h2-size text) */
  --font-weight-regular: 400;
  --font-weight-medium: 500;

  /* Caption: Figma spec (overrides 14px default) */
  --font-size-caption: 16px;
  --line-height-caption: 20.8px;
  --letter-spacing-caption: 1.6px;

  /* Extra spacing tokens */
  --space-xs: 6px;
  --space-5: 20px;
  --space-10: 10px;
  --space-2xl: 72px;

  /* Grid / page layout */
  --grid-cols: 8;
  --grid-gap: var(--space-6);
  --page-padding: var(--space-8);
  --icon-size: 32px;
  --font-size-bg-name: 185px;

  /* Project content colors */
  --color-twitch-purple: #9146ff;
  --color-vagivital-pink: #FCF3F4;
  --color-vaulta-green: #CBFFDA;

  /* Shadows */
  --shadow-sticker: 0 0 1px rgba(0, 0, 0, 0.4), 0 0 4px rgba(0, 0, 0, 0.25);

  /* Mobile-specific */
  --font-size-mobile-name: 51px;
  --letter-spacing-mobile-name: -2.55px;
  --space-mobile-page-y: 40px;

  /* Case study page */
  --font-size-bg-cs: 160px;
  --letter-spacing-bg-cs: -11.2px;
  --icon-size-sm: 20px;
}

[data-theme="dark"] {
  --color-page: #0A0A0A;
  --color-primary-foreground: #FFFFFF;
  --color-foreground-alt: #CCCCCC;
  --color-secondary-foreground: #999999;
  --color-muted-foreground: #737373;
  --color-accent-background: #0D0D0D;
  --color-separator: #262626;
}

@media (max-width: 768px) {
  :root {
    --font-size-h1: 32px;
    --line-height-h1: 35.2px;
    --letter-spacing-h1: -0.96px;

    --font-size-h2: 24px;
    --line-height-h2: 28.8px;
    --letter-spacing-h2: -0.72px;

    --font-size-body-large: 20px;
    --line-height-body-large: 26px;
    --letter-spacing-body-large: -0.4px;

    --container-padding: var(--space-4);
    --page-padding: var(--space-4);
  }
}