/**
 * DESIGN TOKENS - Project 120+ MedTracker
 * ========================================
 * Single source of truth for all design values.
 * Import this file BEFORE styles.css
 *
 * Premium UI Design Tokens with Professional Polish
 */

:root {
   color-scheme: dark;

   /* ===========================================
       COLOR PALETTE - PRIMARY (Deep Blue)
       =========================================== */
   --color-primary-dark: #0d47a1;
   --color-primary-light: #5472d3;
   --color-blue-500: #1a66ff;
   --color-blue-500-rgb: 26, 102, 255;

   /* ===========================================
       COLOR PALETTE - ACCENT (Orange)
       =========================================== */
   --color-accent-dark: #ff9800;
   --color-accent-light: #ffb74d;
   --color-orange-500: #F28C28;
   --color-orange-500-rgb: 242, 140, 40;
   --color-orange-600: #D97A1E;

   /* ===========================================
       COLOR PALETTE - SEMANTIC
       =========================================== */
   --color-success: #10b981;
   --color-success-light: #d1fae5;
   --color-danger: #ef4444;
   --color-danger-light: #fee2e2;
   --color-warning: #f59e0b;
   --color-warning-light: #fef3c7;
   --color-info: #3b82f6;
   --color-success-rgb: 16, 185, 129;
   --color-danger-rgb: 239, 68, 68;
   --color-warning-rgb: 245, 158, 11;
   --color-info-rgb: 59, 130, 246;

   /* ===========================================
       SPACING SCALE (8px base primarily)
       =========================================== */
   --space-0: 0;
   --space-px: 1px;
   --space-0-5: 0.125rem;
   /* 2px */
   --space-1: 0.25rem;
   /* 4px */
   --space-1-5: 0.375rem;
   /* 6px */
   --space-2: 0.5rem;
   /* 8px */
   --space-2-5: 0.625rem;
   /* 10px */
   --space-3: 0.75rem;
   /* 12px */
   --space-3-5: 0.875rem;
   /* 14px */
   --space-4: 1rem;
   /* 16px */
   --space-5: 1.25rem;
   /* 20px */
   --space-6: 1.5rem;
   /* 24px */
   --space-7: 1.75rem;
   /* 28px */
   --space-8: 2rem;
   /* 32px */
   --space-9: 2.25rem;
   /* 36px */
   --space-10: 2.5rem;
   /* 40px */
   --space-12: 3rem;
   /* 48px */
   --space-16: 4rem;
   /* 64px */

   /* ===========================================
       TYPOGRAPHY SCALE
       =========================================== */
   --font-family-serif: 'Lora', Georgia, 'Times New Roman', serif;
   --font-family-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
   --font-family-mono: 'SF Mono', Monaco, 'Cascadia Code', monospace;

   --text-xs: 0.8125rem;
   /* 13px */
   --text-sm: 0.9375rem;
   /* 15px */
   --text-base: 1rem;
   /* 16px */
   --text-lg: 1.125rem;
   /* 18px */
   --text-xl: 1.25rem;
   /* 20px */
   --text-2xl: 1.5rem;
   /* 24px */
   --text-3xl: 1.875rem;
   /* 30px */
   --text-4xl: 2.25rem;
   /* 36px */

   --tracking-tight: -0.025em;
   --tracking-normal: 0em;
   --tracking-wide: 0.025em;

   --leading-tight: 1.25;
   --leading-snug: 1.375;
   --leading-normal: 1.6;
   /* Easier for seniors */
   --leading-relaxed: 1.7;

   --font-light: 300;
   --font-normal: 400;
   --font-medium: 500;
   --font-semibold: 600;
   --font-bold: 700;

   /* ===========================================
       BORDER RADIUS
       =========================================== */
   --radius-none: 0;
   --radius-sm: 0.25rem;
   /* 4px */
   --radius-md: 0.375rem;
   /* 6px */
   --radius-lg: 0.5rem;
   /* 8px */
   --radius-xl: 0.75rem;
   /* 12px */
   --radius-2xl: 1rem;
   /* 16px */
   --radius-3xl: 1.5rem;
   /* 24px */
   --radius-full: 9999px;

   /* ===========================================
       SHADOWS
       =========================================== */
   --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.06);
   --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.08), 0 8px 16px rgba(0, 0, 0, 0.08);
   --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.06), 0 4px 12px rgba(0, 0, 0, 0.06);
   --shadow-card-hover: 0 2px 4px rgba(0, 0, 0, 0.08), 0 12px 28px rgba(0, 0, 0, 0.1);
   --shadow-lg: 0 4px 6px rgba(0, 0, 0, 0.06), 0 16px 32px rgba(0, 0, 0, 0.08);

   --shadow-blue: 0 2px 8px rgba(var(--color-blue-500-rgb), 0.2), 0 8px 24px rgba(var(--color-blue-500-rgb), 0.25);
   --shadow-blue-lg: 0 4px 12px rgba(var(--color-blue-500-rgb), 0.3), 0 16px 40px rgba(var(--color-blue-500-rgb), 0.3);
   --shadow-orange: 0 2px 8px rgba(var(--color-orange-500-rgb), 0.2), 0 8px 24px rgba(var(--color-orange-500-rgb), 0.25);
   --shadow-orange-lg: 0 4px 12px rgba(var(--color-orange-500-rgb), 0.3), 0 16px 40px rgba(var(--color-orange-500-rgb), 0.3);

   /* ===========================================
       TRANSITIONS
       =========================================== */
   --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
   --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
   --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);

   /* ===========================================
       CURSOR GLOW (Flashlight Effect)
       =========================================== */
   --cursor-glow-size: 800px;
   --cursor-glow-opacity: 0.15;
   --cursor-glow-color: var(--color-blue-500);
   --cursor-glow-blur: 70%;

   /* ===========================================
       Z-INDEX SCALE
       =========================================== */
   --z-dropdown: 100;
   --z-sticky: 200;
   --z-fixed: 300;
   --z-modal-backdrop: 400;
   --z-modal: 500;
   --z-popover: 600;
   --z-tooltip: 700;
   --z-nav: 1000;
   --z-cursor-glow: 50;

   /* Glass background tokens */
   --glass-bg-dark: rgba(14, 17, 22, 0.85);
   --glass-bg-light: rgba(255, 255, 255, 0.92);

   /* DARK THEME DEFAULTS AND SEMANTIC TOKENS */
   --primary: var(--color-primary-dark);
   --primary-light: var(--color-primary-light);
   --accent: var(--color-accent-dark);
   --accent-light: var(--color-accent-light);
   --secondary: hsl(220, 60%, 60%);

   --bg-dark: hsl(220, 24%, 7%);
   --bg-card: hsl(220, 18%, 11%);
   --bg-elevated: hsl(220, 18%, 14%);

   --nav-bg: rgba(14, 17, 22, 0.85);
   --glass-bg: var(--glass-bg-dark);

   --text-primary: hsl(0, 0%, 98%);
   --text-secondary: #8b9bb4;
   --text-muted: hsl(220, 12%, 65%);

   --border-color: rgba(255, 255, 255, 0.08);
   --border-color-strong: rgba(255, 255, 255, 0.15);

   --surface: var(--bg-card);
   --input-bg: rgba(255, 255, 255, 0.05);
   --input-bg-hover: rgba(255, 255, 255, 0.08);

   --success: var(--color-success);
   --danger: var(--color-danger);
   --warning: var(--color-warning);
   --warning-text: var(--color-orange-500);

   /* Semantic background tokens */
   --primary-bg: rgba(37, 99, 235, 0.1);
   --success-bg: rgba(16, 185, 129, 0.1);
   --danger-bg: rgba(239, 68, 68, 0.1);
   --warning-bg: rgba(245, 158, 11, 0.1);

   /* Primary dark shade for gradients */
   --primary-dark: hsl(220, 80%, 40%);

   /* Focus ring */
   --focus-ring: 0 0 0 3px rgba(var(--color-blue-500-rgb), 0.5);
   --focus-outline: 3px solid rgba(var(--color-blue-500-rgb), 0.7);
}

/* ===========================================
   LIGHT THEME 
   =========================================== */
[data-theme="light"] {
   color-scheme: light;

   --primary: hsl(220, 90%, 55%);
   --primary-light: #84a9ff;
   --primary-dark: hsl(220, 90%, 45%);
   --accent: #ff9800;
   --accent-light: #ffb74d;
   --danger: #b91c1c;

   --bg-dark: hsl(220, 20%, 97%);
   --bg-card: #ffffff;
   --bg-elevated: hsl(0, 0%, 100%);

   --nav-bg: rgba(255, 255, 255, 0.9);
   --glass-bg: var(--glass-bg-light);

   --text-primary: hsl(220, 24%, 10%);
   --text-secondary: hsl(220, 15%, 35%);
   --text-muted: hsl(220, 10%, 46%);

   --border-color: rgba(0, 0, 0, 0.07);
   --border-color-strong: rgba(0, 0, 0, 0.12);

   --surface: var(--bg-card);
   --input-bg: hsl(220, 20%, 97%);
   --input-bg-hover: hsl(220, 20%, 93%);

   --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04), 0 2px 6px rgba(0, 0, 0, 0.04);
   --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.04), 0 8px 20px rgba(0, 0, 0, 0.06);
   --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 16px rgba(0, 0, 0, 0.05);
   --shadow-card-hover: 0 2px 4px rgba(0, 0, 0, 0.06), 0 12px 28px rgba(0, 0, 0, 0.08);
   --shadow-lg: 0 4px 6px rgba(0, 0, 0, 0.04), 0 16px 36px rgba(0, 0, 0, 0.08);

   --shadow-blue: 0 2px 8px rgba(var(--color-blue-500-rgb), 0.15), 0 8px 24px rgba(var(--color-blue-500-rgb), 0.18);
   --shadow-blue-lg: 0 4px 12px rgba(var(--color-blue-500-rgb), 0.2), 0 16px 40px rgba(var(--color-blue-500-rgb), 0.25);
   --shadow-orange: 0 2px 8px rgba(var(--color-orange-500-rgb), 0.15), 0 8px 24px rgba(var(--color-orange-500-rgb), 0.18);
   --shadow-orange-lg: 0 4px 12px rgba(var(--color-orange-500-rgb), 0.2), 0 16px 40px rgba(var(--color-orange-500-rgb), 0.25);

   --cursor-glow-opacity: 0.08;

   --focus-ring: 0 0 0 3px rgba(var(--color-blue-500-rgb), 0.4);
   --focus-outline: 3px solid rgba(var(--color-blue-500-rgb), 0.8);
   --warning-text: var(--color-orange-500);

   --primary-bg: rgba(37, 99, 235, 0.06);
   --success-bg: rgba(16, 185, 129, 0.06);
   --danger-bg: rgba(239, 68, 68, 0.06);
   --warning-bg: rgba(245, 158, 11, 0.06);
}

[data-theme="dark"] {
   color-scheme: dark;
   --primary: var(--color-primary-dark);
   --primary-light: var(--color-primary-light);
   --accent: var(--color-accent-dark);
   --accent-light: var(--color-accent-light);
   --bg-dark: hsl(220, 24%, 7%);
   --bg-card: hsl(220, 18%, 11%);
   --glass-bg: var(--glass-bg-dark);
   --text-primary: hsl(0, 0%, 98%);
   --text-secondary: #8b9bb4;
}

select option {
   background: var(--bg-card);
   color: var(--text-primary);
}

@media (prefers-reduced-motion: reduce) {
   :root {
      --transition-fast: 0.01ms;
      --transition-base: 0.01ms;
      --transition-slow: 0.01ms;
   }
}

@media (prefers-contrast: high) {
   :root {
      --border-color: rgba(255, 255, 255, 0.3);
      --border-color-strong: rgba(255, 255, 255, 0.5);
   }

   [data-theme="light"] {
      --border-color: rgba(0, 0, 0, 0.3);
      --border-color-strong: rgba(0, 0, 0, 0.5);
   }
}