/**
 * Design Tokens - Doctor Scroll
 * 
 * Sistema de diseño basado en OKLCH para percepción uniforme de color
 * Inspirado en Spotify Design System con adaptaciones WCAG AA
 * 
 * Estructura:
 * 1. Colores (Light/Dark via data-theme)
 * 2. Tipografía (con clamp() para responsive)
 * 3. Espaciado (sistema base 4px)
 * 4. Bordes y radio
 * 5. Sombras
 * 6. Transiciones
 * 7. Gradientes
 * 8. Z-index
 * 9. Breakpoints
 */

/* ================================================================
   1. COLORS - LIGHT MODE (default)
   ================================================================ */

:root {
  /* --- Backgrounds --- */
  --bg-primary: oklch(0.98 0 0);        /* Fondo principal - casi blanco */
  --bg-secondary: oklch(0.95 0 0);      /* Fondo secundario - gris muy claro */
  --bg-tertiary: oklch(1.0 0 0);        /* Fondo terciario - blanco puro */
  --bg-hover: oklch(0.93 0 0);          /* Estados hover */
  --bg-elevated: oklch(1.0 0 0 / 0.8);  /* Glassmorphism */

  /* --- Text --- */
  --text-primary: oklch(0.20 0 0);      /* Texto principal (16.2:1) */
  --text-secondary: oklch(0.35 0 0);    /* Texto secundario (7.8:1) WCAG AA */
  --text-tertiary: oklch(0.55 0 0);     /* Texto terciario (3.8:1) para grande */
  --text-inverse: oklch(0.98 0 0);      /* Texto invertido */
  --text-on-accent: oklch(1.0 0 0);     /* Texto sobre acentos */
  --text-muted: oklch(0.50 0 0);        /* Texto silenciado (4.9:1) WCAG AA */

  /* --- Accents --- */
  --accent-primary: oklch(0.55 0.19 145);        /* Verde principal */
  --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);    /* Borde principal */
  --border-secondary: oklch(0.90 0 0);  /* Borde secundario */

  /* --- 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 */
}

/* ================================================================
   1b. COLORS - DARK MODE
   ================================================================ */

:root[data-theme="dark"] {
  /* Backgrounds */
  --bg-primary: oklch(0.15 0 0);        /* Negro Spotify */
  --bg-secondary: oklch(0.18 0 0);      /* Gris muy oscuro */
  --bg-tertiary: oklch(0.22 0 0);       /* Gris oscuro */
  --bg-hover: oklch(0.25 0 0);          /* Gris medio-oscuro */
  --bg-elevated: oklch(0.20 0 0 / 0.8); /* Glassmorphism dark */

  /* Text */
  --text-primary: oklch(0.95 0 0);      /* Blanco casi puro */
  --text-secondary: oklch(0.70 0 0);    /* Gris claro */
  --text-tertiary: oklch(0.55 0 0);     /* Gris medio */
  --text-inverse: oklch(0.15 0 0);      /* Negro oscuro */

  /* Accents */
  --accent-primary: oklch(0.70 0.20 145);        /* Verde claro en dark (WCAG AA) */
  --accent-primary-hover: oklch(0.70 0.19 145);  /* Verde hover */
  --accent-secondary: oklch(0.65 0.20 260);      /* Púrpura claro */
  --accent-secondary-light: oklch(0.85 0.10 260); /* Púrpura muy claro */
  --accent-secondary-dark: oklch(0.55 0.20 260);  /* Púrpura medio */

  /* Borders */
  --border-primary: oklch(0.45 0 0);    /* Borde claro en dark */
  --border-secondary: oklch(0.25 0 0);  /* Borde medio-oscuro */

  /* States */
  --error: oklch(0.60 0.22 25);
  --warning: oklch(0.75 0.15 85);
  --success: oklch(0.65 0.18 145);
  --info: oklch(0.65 0.15 250);
}

/* ================================================================
   2. TYPOGRAPHY
   ================================================================ */

:root {
  /* 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 - Mobile First con clamp() para tipografía responsive */
  --text-xs: clamp(0.75rem, 2vw, 0.8125rem);     /* 12px → 13px */
  --text-sm: clamp(0.875rem, 2.5vw, 0.9375rem);  /* 14px → 15px */
  --text-base: clamp(1rem, 3vw, 1.0625rem);      /* 16px → 17px */
  --text-lg: clamp(1.125rem, 3.5vw, 1.25rem);    /* 18px → 20px */
  --text-xl: clamp(1.25rem, 4vw, 1.5rem);        /* 20px → 24px */
  --text-2xl: clamp(1.5rem, 5vw, 2rem);          /* 24px → 32px */
  --text-3xl: clamp(2rem, 6vw, 2.5rem);          /* 32px → 40px */
  --text-4xl: clamp(2.5rem, 8vw, 3.5rem);        /* 40px → 56px */
  --text-5xl: 3rem;                                /* 48px - Mega titles */

  /* Font Weights */
  --weight-light: 300;
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-black: 900;

  /* Line Heights */
  --leading-tight: 1.2;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  --leading-loose: 1.75;

  /* Letter Spacing */
  --tracking-tight: -0.025em;
  --tracking-normal: 0;
  --tracking-wide: 0.025em;
}

/* ================================================================
   3. SPACING (4px base system)
   ================================================================ */

:root {
  --space-0: 0;              /* 0px */
  --space-1: 0.25rem;        /* 4px */
  --space-2: 0.5rem;         /* 8px */
  --space-3: 0.75rem;        /* 12px */
  --space-4: 1rem;           /* 16px */
  --space-5: 1.25rem;        /* 20px */
  --space-6: 1.5rem;         /* 24px */
  --space-8: 2rem;           /* 32px */
  --space-10: 2.5rem;        /* 40px */
  --space-11: 2.75rem;       /* 44px - Touch target WCAG AA */
  --space-12: 3rem;          /* 48px */
  --space-14: 3.5rem;        /* 56px - Touch target WCAG AAA */
  --space-16: 4rem;          /* 64px */
  --space-20: 5rem;          /* 80px */
  --space-24: 6rem;          /* 96px */

  /* Legacy spacing aliases */
  --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);
}

/* ================================================================
   4. BORDERS & RADIUS
   ================================================================ */

:root {
  --radius-sm: 0.25rem;      /* 4px */
  --radius-md: 0.5rem;       /* 8px */
  --radius-lg: 1rem;         /* 16px */
  --radius-xl: 1.5rem;       /* 24px */
  --radius-full: 9999px;     /* Pill shape */
}

/* ================================================================
   5. SHADOWS
   ================================================================ */

:root {
  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}

:root[data-theme="dark"] {
  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.3);
  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.4), 0 1px 2px -1px rgb(0 0 0 / 0.4);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.4);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.5), 0 4px 6px -4px rgb(0 0 0 / 0.5);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.6), 0 8px 10px -6px rgb(0 0 0 / 0.6);
}

/* ================================================================
   6. TRANSITIONS
   ================================================================ */

:root {
  /* Durations */
  --duration-instant: 100ms;
  --duration-fast: 200ms;
  --duration-normal: 300ms;
  --duration-slow: 500ms;

  /* Easing Functions */
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);

  /* Composite Transitions */
  --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);
}

/* ================================================================
   7. GRADIENTS
   ================================================================ */

:root {
  --gradient-1: linear-gradient(135deg, oklch(0.6231 0.1880 259.8145) 0%, oklch(0.5461 0.2152 262.8809) 100%);
  --gradient-2: linear-gradient(135deg, oklch(0.3791 0.1378 265.5222) 0%, oklch(0.4882 0.2172 264.3763) 100%);
  --gradient-hero: linear-gradient(180deg, oklch(0.9846 0.0017 247.8389) 0%, oklch(1.0000 0 0) 100%);
}

/* ================================================================
   8. Z-INDEX SCALE
   ================================================================ */

:root {
  --z-base: 0;
  --z-above: 10;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-modal: 400;
  --z-popover: 500;
  --z-tooltip: 600;
  --z-notification: 700;
  --z-overlay: 800;
  --z-max: 9999;
}

/* ================================================================
   9. BREAKPOINTS (Mobile-First)
   ================================================================ */

:root {
  --breakpoint-xs: 20rem;    /* 320px */
  --breakpoint-sm: 24rem;    /* 384px */
  --breakpoint-md: 30rem;    /* 480px */
  --breakpoint-lg: 48rem;    /* 768px */
  --breakpoint-xl: 64rem;    /* 1024px */
  --breakpoint-2xl: 80rem;   /* 1280px */
  --breakpoint-3xl: 96rem;   /* 1536px */
}

/* ================================================================
   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;
  }
}