/* =============================================================
   Science Habitat — CSS Custom Properties (Design Tokens)
   ============================================================= */

:root {
  /* Brand Colors */
  --sh-navy:         #0A1E3A;
  --sh-teal:         #1A8A7D;
  --sh-teal-light:   #22A99A;
  --sh-orange:       #FF6B35;
  --sh-orange-hover: #E85520;
  --sh-white:        #FFFFFF;
  --sh-light:        #F2F6FA;
  --sh-text:         #333333;
  --sh-muted:        #666666;
  --sh-border:       #D8E4EE;

  /* Alpha variants */
  --sh-navy-05:      rgba(10, 30, 58, 0.05);
  --sh-navy-10:      rgba(10, 30, 58, 0.10);
  --sh-teal-10:      rgba(26, 138, 125, 0.10);
  --sh-teal-20:      rgba(26, 138, 125, 0.20);
  --sh-teal-30:      rgba(26, 138, 125, 0.30);

  /* Typography */
  --sh-font-display: 'DM Serif Display', Georgia, serif;
  --sh-font-body:    'DM Sans', system-ui, -apple-system, sans-serif;
  --sh-font-mono:    'IBM Plex Mono', 'Courier New', monospace;

  /* Font Sizes */
  --sh-text-xs:   0.72rem;   /* 11.5px */
  --sh-text-sm:   0.82rem;   /* 13px */
  --sh-text-base: 1rem;      /* 16px */
  --sh-text-md:   1.05rem;
  --sh-text-lg:   1.1rem;
  --sh-text-xl:   1.4rem;
  --sh-text-h4:   1.1rem;
  --sh-text-h3:   clamp(1.2rem, 2vw, 1.6rem);
  --sh-text-h2:   clamp(1.6rem, 3vw, 2.4rem);
  --sh-text-h1:   clamp(2rem, 4vw, 3.2rem);

  /* Spacing */
  --sh-space-4:   4px;
  --sh-space-8:   8px;
  --sh-space-12:  12px;
  --sh-space-16:  16px;
  --sh-space-20:  20px;
  --sh-space-24:  24px;
  --sh-space-32:  32px;
  --sh-space-40:  40px;
  --sh-space-48:  48px;
  --sh-space-56:  56px;
  --sh-space-64:  64px;
  --sh-space-80:  80px;

  /* Border Radius */
  --sh-radius-sm:  6px;
  --sh-radius-md:  10px;
  --sh-radius-lg:  14px;
  --sh-radius-xl:  16px;
  --sh-radius-pill: 20px;
  --sh-radius-full: 50%;

  /* Shadows */
  --sh-shadow-sm:  0 2px 8px rgba(10, 30, 58, 0.06);
  --sh-shadow-md:  0 8px 24px rgba(10, 30, 58, 0.10);
  --sh-shadow-lg:  0 16px 40px rgba(10, 30, 58, 0.12);
  --sh-shadow-xl:  0 24px 56px rgba(10, 30, 58, 0.16);

  /* Transitions */
  --sh-transition-fast:   0.15s ease;
  --sh-transition-base:   0.22s ease;
  --sh-transition-slow:   0.35s ease;

  /* Z-Index */
  --sh-z-dropdown: 100;
  --sh-z-nav:      200;
  --sh-z-modal:    300;
  --sh-z-cookie:   999;

  /* Container */
  --sh-container-max: 1200px;
  --sh-container-pad: 24px;

  /* Nav height */
  --sh-nav-height: 68px;
}

/* Dark mode token overrides */
@media (prefers-color-scheme: dark) {
  /* Uncomment to enable dark mode in future
  :root {
    --sh-white: #0d1117;
    --sh-light: #161b22;
    --sh-text:  #e6edf3;
    --sh-muted: #8b949e;
    --sh-border: #30363d;
  }
  */
}