/* ============================================
   DESIGN TOKENS - Marine & Wildlife Biology Guide
   ============================================ */

:root {
  /* Primary ocean palette */
  --color-navy:        #0a1628;
  --color-deep-blue:   #102a43;
  --color-ocean:       #1a5276;
  --color-teal:        #148f77;
  --color-seafoam:     #48c9b0;
  --color-sky:         #85c1e9;
  --color-sand:        #f4e6c8;
  --color-coral:       #e74c3c;
  --color-kelp:        #27ae60;

  /* Neutrals */
  --color-white:       #ffffff;
  --color-off-white:   #f8f9fa;
  --color-light-gray:  #e9ecef;
  --color-mid-gray:    #6c757d;
  --color-dark-gray:   #343a40;
  --color-black:       #212529;

  /* Semantic aliases */
  --bg-page:           var(--color-off-white);
  --bg-sidebar:        var(--color-navy);
  --bg-card:           var(--color-white);
  --bg-callout:        var(--color-sand);
  --bg-hero:           linear-gradient(135deg, var(--color-navy) 0%, #0d4f4f 100%);

  --text-primary:      var(--color-dark-gray);
  --text-heading:      var(--color-black);
  --text-link:         var(--color-ocean);
  --text-link-hover:   var(--color-teal);
  --text-muted:        var(--color-mid-gray);
  --text-sidebar:      #c8d6e5;
  --text-sidebar-active: var(--color-white);
  --text-on-dark:      var(--color-white);

  --border-default:    var(--color-light-gray);
  --border-focus:      var(--color-ocean);

  /* Shadows */
  --shadow-card:       0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-hover:      0 4px 16px rgba(0, 0, 0, 0.12);
  --shadow-sidebar:    4px 0 12px rgba(0, 0, 0, 0.1);

  /* Typography */
  --font-primary:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:         'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;

  /* Type scale (1.25 ratio) */
  --text-xs:           0.75rem;
  --text-sm:           0.875rem;
  --text-base:         1rem;
  --text-md:           1.125rem;
  --text-lg:           1.25rem;
  --text-xl:           1.5rem;
  --text-2xl:          1.875rem;
  --text-3xl:          2.25rem;
  --text-4xl:          3rem;

  --leading-tight:     1.25;
  --leading-normal:    1.6;
  --leading-relaxed:   1.75;

  --weight-normal:     400;
  --weight-medium:     500;
  --weight-semibold:   600;
  --weight-bold:       700;

  /* Spacing scale */
  --space-1:    0.25rem;
  --space-2:    0.5rem;
  --space-3:    0.75rem;
  --space-4:    1rem;
  --space-5:    1.5rem;
  --space-6:    2rem;
  --space-8:    3rem;
  --space-10:   4rem;
  --space-12:   6rem;

  /* Layout */
  --sidebar-width:     280px;
  --sidebar-width-sm:  240px;
  --content-max-width: 960px;
  --radius-sm:         4px;
  --radius-md:         8px;
  --radius-lg:         12px;
  --radius-full:       9999px;

  /* Transitions */
  --transition-fast:   0.15s ease;
  --transition-base:   0.2s ease;
  --transition-slow:   0.3s ease;

  /* Z-index scale */
  --z-sidebar:         100;
  --z-overlay:         200;
  --z-modal:           300;
  --z-alert:           400;
}