/* variables.css - Custom properties — Apple-inspired design system */

:root {
  /* Colors — Apple style: high contrast, clean */
  --color-bg-light: #fbfbfd;
  --color-bg-dark: #000000;
  --color-bg-card: #ffffff;
  --color-bg-card-hover: #f5f5f7;
  --color-text-primary: #1d1d1f;
  --color-text-secondary: #86868b;
  --color-text-light: #ffffff;
  --color-text-light-secondary: rgba(255, 255, 255, 0.7);
  --color-accent: #2997ff;
  --color-border: rgba(0, 0, 0, 0.08);
  --color-border-light: rgba(255, 255, 255, 0.12);

  /* Typography — SF Pro / Inter */
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', sans-serif;
  --font-size-display: clamp(64px, 10vw, 120px);
  --font-size-hero-sub: clamp(20px, 2.5vw, 32px);
  --font-size-section-heading: clamp(40px, 6vw, 72px);
  --font-size-section-sub: clamp(18px, 2vw, 24px);
  --font-size-card-acronym: clamp(36px, 5vw, 56px);
  --font-size-card-title: clamp(24px, 3vw, 36px);
  --font-size-body: clamp(17px, 1.6vw, 21px);
  --font-size-small: clamp(14px, 1.2vw, 17px);
  --font-size-caption: clamp(12px, 1vw, 14px);
  --font-weight-heavy: 800;
  --font-weight-bold: 700;
  --font-weight-semibold: 600;
  --font-weight-normal: 400;
  --font-weight-light: 300;

  /* Spacing — Generous, Apple-like breathing room */
  --spacing-section: clamp(100px, 15vw, 200px);
  --spacing-section-inner: clamp(60px, 8vw, 120px);
  --spacing-card-gap: clamp(16px, 2vw, 24px);
  --max-width: 1080px;
  --max-width-narrow: 820px;

  /* Animations */
  --transition-base: 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
  --transition-slow: 0.6s cubic-bezier(0.25, 0.1, 0.25, 1);
  --animation-reveal: 0.9s cubic-bezier(0.16, 1, 0.3, 1);

  /* Border radius */
  --radius-card: 24px;
  --radius-card-sm: 18px;
}