/* ============================================
   Design Tokens — Sedation Reference Tool
   ============================================ */

:root {
  /* Brand */
  --brand-primary: #3B82C4;
  --brand-primary-light: #5BA0DB;
  --brand-secondary: #1E5A8A;

  /* Section Colors (pastel palette) */
  --section-red: #FFBABA;
  --section-orange: #FFD6A5;
  --section-yellow: #E8E4A0;
  --section-green: #A8E6B0;
  --section-blue: #A8D8F0;
  --section-indigo: #B8C4F0;
  --section-pink: #F0B8D0;
  --section-gray: #DEDEDE;
  --section-teal: #A0D8D0;
  --section-lime: #C8E6A0;

  /* Glass variants */
  --section-red-glass: rgba(255, 186, 186, 0.7);
  --section-red-glass-end: rgba(255, 186, 186, 0.4);
  --section-orange-glass: rgba(255, 214, 165, 0.7);
  --section-orange-glass-end: rgba(255, 214, 165, 0.4);
  --section-yellow-glass: rgba(232, 228, 160, 0.7);
  --section-yellow-glass-end: rgba(232, 228, 160, 0.4);
  --section-green-glass: rgba(168, 230, 176, 0.7);
  --section-green-glass-end: rgba(168, 230, 176, 0.4);
  --section-blue-glass: rgba(168, 216, 240, 0.7);
  --section-blue-glass-end: rgba(168, 216, 240, 0.4);
  --section-indigo-glass: rgba(184, 196, 240, 0.7);
  --section-indigo-glass-end: rgba(184, 196, 240, 0.4);
  --section-pink-glass: rgba(240, 184, 208, 0.7);
  --section-pink-glass-end: rgba(240, 184, 208, 0.4);
  --section-gray-glass: rgba(222, 222, 222, 0.7);
  --section-gray-glass-end: rgba(222, 222, 222, 0.4);
  --section-teal-glass: rgba(160, 216, 208, 0.7);
  --section-teal-glass-end: rgba(160, 216, 208, 0.4);
  --section-lime-glass: rgba(200, 230, 160, 0.7);
  --section-lime-glass-end: rgba(200, 230, 160, 0.4);

  /* Semantic */
  --bg: #FFFFFF;
  --bg-surface: #F8F9FA;
  --text: #1A1A1A;
  --text-secondary: #555555;
  --text-muted: #6B6B6B;
  --border: #DDDDDD;
  --link: #1E5A8A;

  /* Spacing scale */
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;

  /* Typography */
  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-size-base: 1rem;
  --font-size-sm: 0.875rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --line-height: 1.6;
  --line-height-tight: 1.3;

  /* Layout */
  --max-width: 600px;
  --border-radius: 16px;
  --border-radius-sm: 12px;

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-normal: 300ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 16px rgba(31, 38, 135, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 8px 32px rgba(31, 38, 135, 0.12), 0 4px 8px rgba(0, 0, 0, 0.06);

  /* Touch */
  --min-touch-target: 44px;

  /* Glass Material */
  --glass-blur: 8px;
  --glass-saturate: 160%;
  --glass-bg-heavy: rgba(255, 255, 255, 0.85);
  --glass-border: rgba(0, 0, 0, 0.08);
  --glass-shadow: 0 8px 32px rgba(31, 38, 135, 0.12);
  --glass-inner-glow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
  --glass-gloss: rgba(255, 255, 255, 0.45);
  --glass-gloss-end: rgba(255, 255, 255, 0.05);
}

/* Dark mode */
[data-theme="dark"] {
  --bg: #0A0A0A;
  --bg-surface: #1A1A1A;
  --text: #F0F0F0;
  --text-secondary: #CCCCCC;
  --text-muted: #999999;
  --border: #3A3A3A;
  --link: #6BB5E8;

  --section-red: #6B2D2D;
  --section-orange: #6B4A2D;
  --section-yellow: #5C5828;
  --section-green: #2D5C35;
  --section-blue: #2D4A60;
  --section-indigo: #3A4070;
  --section-pink: #6B2D4A;
  --section-gray: #3A3A3A;
  --section-teal: #2D5550;
  --section-lime: #3A5528;

  --section-red-glass: rgba(120, 50, 50, 0.8);
  --section-red-glass-end: rgba(120, 50, 50, 0.5);
  --section-orange-glass: rgba(120, 80, 45, 0.8);
  --section-orange-glass-end: rgba(120, 80, 45, 0.5);
  --section-yellow-glass: rgba(100, 95, 40, 0.8);
  --section-yellow-glass-end: rgba(100, 95, 40, 0.5);
  --section-green-glass: rgba(45, 100, 55, 0.8);
  --section-green-glass-end: rgba(45, 100, 55, 0.5);
  --section-blue-glass: rgba(45, 75, 105, 0.8);
  --section-blue-glass-end: rgba(45, 75, 105, 0.5);
  --section-indigo-glass: rgba(60, 65, 120, 0.8);
  --section-indigo-glass-end: rgba(60, 65, 120, 0.5);
  --section-pink-glass: rgba(120, 50, 80, 0.8);
  --section-pink-glass-end: rgba(120, 50, 80, 0.5);
  --section-gray-glass: rgba(65, 65, 65, 0.8);
  --section-gray-glass-end: rgba(65, 65, 65, 0.5);
  --section-teal-glass: rgba(45, 90, 85, 0.8);
  --section-teal-glass-end: rgba(45, 90, 85, 0.5);
  --section-lime-glass: rgba(60, 90, 40, 0.8);
  --section-lime-glass-end: rgba(60, 90, 40, 0.5);

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.15);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.25), 0 2px 4px rgba(0, 0, 0, 0.15);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.35), 0 4px 8px rgba(0, 0, 0, 0.2);

  --glass-bg-heavy: rgba(30, 30, 30, 0.85);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  --glass-inner-glow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  --glass-gloss: rgba(255, 255, 255, 0.08);
  --glass-gloss-end: rgba(255, 255, 255, 0.01);
}

/* Font size levels */
.font-size-medium {
  --font-size-base: 1.125rem;
  --font-size-sm: 1rem;
  --font-size-lg: 1.25rem;
  --font-size-xl: 1.375rem;
}

.font-size-large {
  --font-size-base: 1.25rem;
  --font-size-sm: 1.125rem;
  --font-size-lg: 1.375rem;
  --font-size-xl: 1.5rem;
}