/**
 * Design Tokens - Doctor Scroll
 * 
 * Sistema de diseño basado en Spotify Design System con adaptaciones WCAG AA
 * Espacio de color: OKLCH para percepción uniforme
 * Versión: 1.0.0
 * 
 * Basado en: /development/web/DESIGN_SYSTEM.md
 */

:root {
  /* ========================================
   COLORS - LIGHT MODE
   ======================================== */
  
  /* Backgrounds */
  --bg-primary: oklch(0.98 0 0);        /* #FAFAFA - Fondo principal */
  --bg-secondary: oklch(0.95 0 0);      /* #F2F2F2 - Fondo secundario */
  --bg-tertiary: oklch(1.0 0 0);        /* #FFFFFF - Fondo terciario */
  --bg-hover: oklch(0.93 0 0);          /* #EDEDED - Estados hover */
  --bg-elevated: oklch(1.0 0 0 / 0.8);  /* Glassmorphism */
  
  /* Text */
  --text-primary: oklch(0.20 0 0);      /* #333333 - Texto principal (16.2:1) */
  --text-secondary: oklch(0.35 0 0);    /* #595959 - Texto secundario (7.8:1) WCAG AA */
  --text-tertiary: oklch(0.55 0 0);     /* #8C8C8C - Texto terciario (3.8:1) para grande */
  --text-inverse: oklch(0.98 0 0);      /* #FAFAFA - Texto invertido */
  --text-on-accent: oklch(1.0 0 0);     /* #FFFFFF - Texto sobre acentos */
  --text-muted: oklch(0.50 0 0);        /* #808080 - Texto silenciado (4.9:1) WCAG AA */
  
  /* Accents */
  --accent-primary: oklch(0.55 0.19 145);        /* Verde Spotify */
  --accent-primary-hover: oklch(0.48 0.19 145);  /* Verde hover */
  --accent-primary-light: oklch(0.95 0.10 145);  /* Verde claro */
  
  --accent-secondary: oklch(0.45 0.20 260);      /* Púrpura */
  --accent-secondary-hover: oklch(0.50 0.21 260); /* Púrpura hover */
  --accent-secondary-light: oklch(0.92 0.06 260); /* Púrpura claro */
  --accent-secondary-dark: oklch(0.52 0.19 260);  /* Púrpura oscuro */
  
  /* Borders */
  --border-primary: oklch(0.85 0 0);    /* #D9D9D9 */
  --border-secondary: oklch(0.90 0 0);  /* #E6E6E6 */
  
  /* States */
  --error: oklch(0.55 0.22 25);         /* Rojo */
  --warning: oklch(0.70 0.15 85);       /* Amarillo */
  --success: oklch(0.60 0.18 145);      /* Verde */
  --info: oklch(0.60 0.15 250);         /* Azul */
  
  /* ========================================
   COLORS - DARK MODE
   ======================================== */
  
  /* Backgrounds */
  --bg-primary-dark: oklch(0.15 0 0);   /* #191414 - Negro Spotify */
  --bg-secondary-dark: oklch(0.18 0 0); /* #2E2E2E */
  --bg-tertiary-dark: oklch(0.22 0 0);  /* #383838 */
  --bg-hover-dark: oklch(0.25 0 0);     /* #404040 */
  --bg-elevated-dark: oklch(0.20 0 0 / 0.8); /* Glassmorphism dark */
  
  /* Text */
  --text-primary-dark: oklch(0.95 0 0); /* #F2F2F2 */
  --text-secondary-dark: oklch(0.70 0 0); /* #B3B3B3 */
  --text-tertiary-dark: oklch(0.55 0 0); /* #8C8C8C */
  
  /* ========================================
   SPACING (4px base system)
   ======================================== */
  
  --space-0: 0;              /* 0px - Sin espacio */
  --space-1: 0.25rem;        /* 4px - Micro */
  --space-2: 0.5rem;         /* 8px - Tiny */
  --space-3: 0.75rem;        /* 12px - Small */
  --space-4: 1rem;           /* 16px - Base */
  --space-5: 1.25rem;        /* 20px - Medium */
  --space-6: 1.5rem;         /* 24px - Large */
  --space-8: 2rem;           /* 32px - XL */
  --space-10: 2.5rem;        /* 40px - XXL */
  --space-11: 2.75rem;       /* 44px - Touch target WCAG AA */
  --space-12: 3rem;          /* 48px - 3XL */
  --space-14: 3.5rem;        /* 56px - Touch target WCAG AAA */
  --space-16: 4rem;          /* 64px - 4XL */
  --space-20: 5rem;          /* 80px - 5XL */
  --space-24: 6rem;          /* 96px - 6XL */
  
  /* Legacy aliases (mantener por compatibilidad) */
  --spacing-xs: var(--space-2);
  --spacing-sm: var(--space-3);
  --spacing-md: var(--space-4);
  --spacing-lg: var(--space-6);
  --spacing-xl: var(--space-8);
  --spacing-2xl: var(--space-12);
  --spacing-3xl: var(--space-16);
  
  /* ========================================
   BREAKPOINTS (Mobile-First)
   ========================================
   
   Sistema de breakpoints consistente basado en Tailwind CSS
   Mobile-first: min-width para evitar overrides
   
   Usage:
   @media (min-width: var(--breakpoint-md)) { ... }
   Or for max-width (legacy):
   @media (max-width: calc(var(--breakpoint-md) - 1px)) { ... }
   */
  
  --breakpoint-xs: 20rem;    /* 320px - Extra small devices */
  --breakpoint-sm: 24rem;    /* 384px - Small devices */
  --breakpoint-md: 30rem;    /* 480px - Medium devices (landscape phones) */
  --breakpoint-lg: 48rem;    /* 768px - Large devices (tablets) */
  --breakpoint-xl: 64rem;    /* 1024px - XL devices (desktops) */
  --breakpoint-2xl: 80rem;   /* 1280px - 2XL devices (large screens) */
  --breakpoint-3xl: 96rem;   /* 1536px - 3XL devices (extra large screens) */
  
  /* ========================================
   TYPOGRAPHY
   ======================================== */
  
  /* Font families */
  --font-primary: 'DM Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: 'Inter Tight', 'DM Sans', sans-serif;
  --font-mono: 'Fira Code', monospace;
  
  /* Font sizes (escala mobile-first) */
  --text-xs: 0.75rem;        /* 12px - Labels pequeños */
  --text-sm: 0.875rem;       /* 14px - Texto secundario */
  --text-base: 1rem;         /* 16px - Texto cuerpo */
  --text-lg: 1.125rem;       /* 18px - Subtítulos */
  --text-xl: 1.25rem;        /* 20px - Títulos pequeños */
  --text-2xl: 1.5rem;        /* 24px - Títulos medianos */
  --text-3xl: 1.875rem;      /* 30px - Títulos grandes */
  --text-4xl: 2.25rem;       /* 36px - Hero titles */
  --text-5xl: 3rem;          /* 48px - Mega titles */
  
  /* Font weights */
  --weight-light: 300;       /* Light */
  --weight-normal: 400;      /* Texto normal */
  --weight-medium: 500;      /* Énfasis ligero */
  --weight-semibold: 600;    /* Énfasis medio */
  --weight-bold: 700;        /* Títulos */
  --weight-black: 900;       /* Display */
  
  /* Line heights */
  --leading-tight: 1.2;      /* Títulos */
  --leading-snug: 1.375;     /* Subtítulos */
  --leading-normal: 1.5;     /* Texto cuerpo */
  --leading-relaxed: 1.625;  /* Texto largo */
  --leading-loose: 1.75;     /* Muy espaciado */
  
  /* Letter spacing */
  --tracking-tight: -0.025em;
  --tracking-normal: 0;
  --tracking-wide: 0.025em;
  
  /* ========================================
   BORDERS
   ======================================== */
  
  --radius-sm: 0.25rem;      /* 4px */
  --radius-md: 0.5rem;       /* 8px */
  --radius-lg: 1rem;         /* 16px */
  --radius-xl: 1.5rem;       /* 24px */
  --radius-full: 9999px;     /* Pill shape */
  
  /* ========================================
   SHADOWS - LIGHT MODE
   ======================================== */
  
  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1);
  
  /* ========================================
   TRANSITIONS
   ======================================== */
  
  /* Durations */
  --duration-instant: 100ms;  /* Transiciones inmediatas */
  --duration-fast: 200ms;     /* Transiciones rápidas */
  --duration-normal: 300ms;   /* Transiciones normales */
  --duration-slow: 500ms;     /* Transiciones lentas */
  
  /* Easing functions */
  --ease-in: cubic-bezier(0.4, 0, 1, 1);              /* Entrada */
  --ease-out: cubic-bezier(0, 0, 0.2, 1);            /* Salida */
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);       /* Entrada-Salida */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);  /* Spring bounce */
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55); /* Rebote fuerte */
  
  /* Transiciones compuestas */
  --transition-colors: color var(--duration-fast) var(--ease-out),
                       background-color var(--duration-fast) var(--ease-out),
                       border-color var(--duration-fast) var(--ease-out);
  
  --transition-transform: transform var(--duration-fast) var(--ease-out);
  
  --transition-all: all var(--duration-fast) var(--ease-out);
  
  /* ========================================
   Z-INDEX SCALE
   ======================================== */
  
  --z-base: 0;
  --z-above: 10;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-modal: 400;
  --z-popover: 500;
  --z-tooltip: 600;
}

/* ========================================
 DARK MODE OVERRIDES
 ======================================== */

:root[data-theme="dark"] {
  /* Backgrounds */
  --bg-primary: var(--bg-primary-dark);
  --bg-secondary: var(--bg-secondary-dark);
  --bg-tertiary: var(--bg-tertiary-dark);
  --bg-hover: var(--bg-hover-dark);
  --bg-elevated: var(--bg-elevated-dark);
  
  /* Text */
  --text-primary: var(--text-primary-dark);
  --text-secondary: var(--text-secondary-dark);
  --text-tertiary: var(--text-tertiary-dark);
  
  /* Shadows (más opacity en dark mode) */
  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.3);
  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.4);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.5);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.6);
}

/* ========================================
 LIGHT MODE OVERRIDES (explicito)
 ======================================== */

:root[data-theme="light"] {
  /* Ya definido en :root por defecto */
  --bg-primary: oklch(0.98 0 0);
  --bg-secondary: oklch(0.95 0 0);
  --bg-tertiary: oklch(1.0 0 0);
}

/* ========================================
 ACCESSIBILITY - REDUCED MOTION
 ======================================== */

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-instant: 0ms;
    --duration-fast: 0ms;
    --duration-normal: 0ms;
    --duration-slow: 0ms;
    
    --ease-in: linear;
    --ease-out: linear;
    --ease-in-out: linear;
    --ease-spring: linear;
    --ease-bounce: linear;
  }
}