/* ==========================================================================
   HUMAN DESIGN ACADEMY — DESIGN TOKENS (GOOGLE STORE WHITE THEME)
   Aesthetic: Pure Google White, Pastel Card Tints, Material Typography & Pill Accents
   ========================================================================== */

:root {
  /* Color Palette — White Theme */
  --bg-page: #ffffff;
  --bg-surface: #f8f9fa;
  --bg-surface-elevated: #ffffff;
  --bg-pill-hover: #f1f3f4;
  --bg-pill-active: #e8eaed;
  --bg-dropdown: #ffffff;

  /* Pastel Tints (Matching Google Store Category Cards) */
  --pastel-medical-bg: #e8f0fe;
  --pastel-medical-pill: #d2e3fc;
  --pastel-medical-text: #1967d2;

  --pastel-education-bg: #fef7e0;
  --pastel-education-pill: #feefc3;
  --pastel-education-text: #b06000;

  --pastel-design-bg: #e6f4ea;
  --pastel-design-pill: #ceead6;
  --pastel-design-text: #137333;

  --pastel-founders-bg: #f3e8fd;
  --pastel-founders-pill: #e8d0fb;
  --pastel-founders-text: #7627bb;

  --browse-pill-bg: #e8f0fe;
  --browse-pill-hover: #d2e3fc;
  --browse-pill-text: #1a73e8;

  /* Primary Typography Colors */
  --text-primary: #1f1f1f;
  --text-secondary: #5f6368;
  --text-muted: #80868b;
  --text-inverse: #ffffff;

  /* Borders & Dividers */
  --border-subtle: #e8eaed;
  --border-medium: #dadce0;
  --border-focus: #1a73e8;

  /* Brand Accents */
  --accent-google-blue: #1a73e8;
  --accent-google-blue-hover: #1765cc;
  --accent-dark: #111827;
  --accent-lime: #10b981;

  /* Typography Stack */
  --font-display: 'Google Sans', 'Urbanist', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Google Sans Text', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* Radius */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-2xl: 28px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-dropdown: 0 16px 36px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.04);
  --shadow-card: 0 4px 14px rgba(0, 0, 0, 0.05);
  --shadow-card-hover: 0 10px 24px rgba(0, 0, 0, 0.1);
  --shadow-hero-stage: 0 20px 60px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.05);

  /* Transitions */
  --transition-fast: 150ms cubic-bezier(0.2, 0, 0, 1);
  --transition-normal: 250ms cubic-bezier(0.2, 0, 0, 1);
  --transition-smooth: 350ms cubic-bezier(0.16, 1, 0.3, 1);

  /* Layout */
  --container-width: 1280px;
  --header-height: 64px;
}