/* ===== DESIGN TOKENS =====
   Source of truth: spec-design.md
   All values derived from the approved wireframe (Wireframe #1: Hero + Grid)
*/

:root {
  /* --- Colors --- */
  --black: #111;
  --dark: #222;
  --gray-700: #444;
  --gray-500: #767676;  /* WCAG AA 4.54:1 on white (was #777 = 4.48:1) */
  --gray-400: #767676;  /* WCAG AA 4.54:1 on white (was #999 = 3.0:1) */
  --gray-200: #ddd;
  --gray-100: #f2f2f2;
  --white: #fff;

  /* --- Typography --- */
  --font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;

  /* Headings: 30–44px, weight 300, tight tracking */
  --heading-xl: 44px;
  --heading-lg: 32px;
  --heading-md: 30px;
  --heading-sm: 18px;
  --heading-weight: 300;
  --heading-tracking-tight: -0.5px;
  --heading-tracking: -0.3px;

  /* Body: 13–15px, weight 400, line-height 1.6–1.8 */
  --body-lg: 15px;
  --body-md: 14px;
  --body-sm: 13px;
  --body-weight: 400;
  --body-line-height: 1.8;

  /* Labels/Nav: 11–13px, weight 500–600, uppercase, wide tracking */
  --label-lg: 13px;
  --label-md: 12px;
  --label-sm: 11px;
  --label-weight: 500;
  --label-weight-bold: 600;
  --label-tracking: 1.5px;
  --label-tracking-wide: 3px;

  /* --- Layout --- */
  --max-w: 1200px;
  --container-pad: 20px;
  --nav-height: 64px;
  --section-spacing: 72px;

  /* --- Grid --- */
  --grid-gap: 16px;
  --grid-gap-lg: 24px;
  --grid-gap-xl: 48px;

  /* --- Breakpoints (for reference, used in media queries) --- */
  /* --bp-mobile: 768px; */

  /* --- Transitions --- */
  --transition-fast: 0.2s ease;
  --transition-med: 0.3s ease;
  --transition-slow: 0.5s ease;

  /* --- Nav --- */
  --nav-bg: rgba(255, 255, 255, 0.95);
  --nav-blur: blur(12px);
}

/* ===== DARK MODE =====
   Token overrides only — overlays on images stay hardcoded (intentionally theme-independent)
*/

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --white: #111;
    --black: #f0f0f0;
    --gray-100: #1a1a1a;
    --gray-200: #2a2a2a;
    --gray-400: #666;
    --gray-500: #999;
    --gray-700: #ccc;
    --dark: #0a0a0a;
    --nav-bg: rgba(17, 17, 17, 0.95);
  }
}

[data-theme="dark"] {
  --white: #111;
  --black: #f0f0f0;
  --gray-100: #1a1a1a;
  --gray-200: #2a2a2a;
  --gray-400: #666;
  --gray-500: #999;
  --gray-700: #ccc;
  --dark: #0a0a0a;
  --nav-bg: rgba(17, 17, 17, 0.95);
}

[data-theme="light"] {
  --black: #111;
  --dark: #222;
  --gray-700: #444;
  --gray-500: #767676;
  --gray-400: #767676;
  --gray-200: #ddd;
  --gray-100: #f2f2f2;
  --white: #fff;
  --nav-bg: rgba(255, 255, 255, 0.95);
}