/*
 * Tokens de diseño de Kaia (D-030). Tres capas, como colecciones de variables en Figma:
 *
 *   1. Primitivos   --color-<familia>-<paso>, --space-<n>, --radius-<talla>, --font-size-<talla>…
 *                   Valores crudos. Solo se usan aquí abajo, nunca en componentes.
 *   2. Semánticos   --color-<rol>-<variante>[-<estado>]: bg, text, border, accent, status, data.
 *                   Lo que significa el color. Un tema (claro, impresión) solo redefine esta capa.
 *   3. Componente   --<componente>-<propiedad>[-<estado>]: card, block, button, input, toast, chart…
 *                   Apuntan a semánticos. Cambiar un componente no toca a los demás.
 *
 * Regla: style.css, health.css, report.css y el JS usan capas 2 y 3. Un rediseño cambia primitivos
 * y semánticos; los nombres se quedan.
 */
:root {
  /* ── 1. Primitivos ─────────────────────────────────────────────── */
  /* Neutros verdosos: 0 es blanco, 1000 casi negro. */
  --color-neutral-0: #ffffff;
  --color-neutral-50: #edf3ef;
  --color-neutral-100: #d5dfd9;
  --color-neutral-200: #c9d6cf;
  --color-neutral-300: #bac9c0;
  --color-neutral-400: #96a5a1;
  --color-neutral-500: #75847d;
  --color-neutral-600: #51675b;
  --color-neutral-700: #35413c;
  --color-neutral-750: #2a3333;
  --color-neutral-800: #222b27;
  --color-neutral-850: #1e2723;
  --color-neutral-900: #181e1e;
  --color-neutral-950: #101414;
  --color-neutral-1000: #0c1010;

  --color-lime-200: #d5ff92;
  --color-lime-300: #c4f579;
  --color-lime-800: #3d5229;
  --color-lime-850: #29352c;
  --color-lime-900: #243018;
  --color-lime-950: #172010;

  --color-amber-200: #eadba1;
  --color-amber-300: #e7b97b;
  --color-amber-700: #625c39;
  --color-amber-950: #29271d;

  --color-coral-200: #f3c2b8;
  --color-coral-300: #ec9a8a;
  --color-coral-700: #6b3b33;
  --color-coral-950: #2b1c19;

  --color-teal-700: #205d46;
  --color-orange-400: #f0784a;
  --color-green-400: #4fc47c;
  --color-blue-400: #78b7f5;
  --color-purple-300: #b7a0ec;

  /* Espacio en base 4. */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;

  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 12px;
  --radius-2xl: 14px;
  --radius-3xl: 16px;
  --radius-full: 999px;

  --font-family-sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-size-2xs: 10px;
  --font-size-xs: 11px;
  --font-size-sm: 12px;
  --font-size-md: 13px;
  --font-size-base: 14px;
  --font-size-lg: 16px;
  --font-size-xl: 18px;
  --font-size-2xl: 21px;
  --font-size-3xl: 30px;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 550;
  --font-weight-bold: 650;
  --line-height-tight: 1.1;
  --line-height-snug: 1.5;
  --line-height-relaxed: 1.7;

  --duration-fast: 150ms;
  --duration-base: 300ms;
  --duration-slow: 450ms;
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-in: cubic-bezier(.4, 0, 1, 1);

  --shadow-lg: 0 12px 32px rgb(0 0 0 / .45);
  --z-raised: 1;
  --z-toast: 100;

  --layout-page-max: 1200px;
  --layout-page-max-wide: 1600px;
  --layout-gutter: var(--space-6);
  --layout-header-height: 64px;

  /* ── 2. Semánticos (tema oscuro, el de siempre) ────────────────── */
  color-scheme: dark;
  --color-bg-canvas: var(--color-neutral-950);
  --color-bg-surface: var(--color-neutral-900);
  --color-bg-surface-raised: var(--color-neutral-850);
  --color-bg-surface-hover: var(--color-neutral-800);
  --color-bg-input: var(--color-neutral-950);
  --color-bg-overlay: var(--color-neutral-1000);

  --color-border-subtle: var(--color-neutral-750);
  --color-border-strong: var(--color-neutral-700);

  --color-text-primary: var(--color-neutral-50);
  --color-text-secondary: var(--color-neutral-400);
  --color-text-tertiary: var(--color-neutral-500);
  --color-text-emphasis: var(--color-neutral-200);
  --color-text-on-accent: var(--color-lime-950);
  --color-link: var(--color-text-primary);

  --color-accent: var(--color-lime-300);
  --color-accent-hover: var(--color-lime-200);
  --color-accent-border: var(--color-lime-800);
  --color-accent-bg: var(--color-lime-900);
  --color-accent-bg-strong: var(--color-lime-850);
  --color-focus-ring: var(--color-accent);

  /* Estados: fg es el color fuerte (barras, flechas), text el texto sobre bg. */
  --color-status-success-fg: var(--color-accent);
  --color-status-success-text: var(--color-neutral-50);
  --color-status-success-bg: var(--color-accent-bg);
  --color-status-success-border: var(--color-accent-border);
  --color-status-warning-fg: var(--color-amber-300);
  --color-status-warning-text: var(--color-amber-200);
  --color-status-warning-bg: var(--color-amber-950);
  --color-status-warning-border: var(--color-amber-700);
  --color-status-danger-fg: var(--color-coral-300);
  --color-status-danger-text: var(--color-coral-200);
  --color-status-danger-bg: var(--color-coral-950);
  --color-status-danger-border: var(--color-coral-700);
  --color-status-info-fg: var(--color-text-secondary);
  --color-status-info-text: var(--color-text-primary);
  --color-status-info-bg: var(--color-bg-surface-raised);
  --color-status-info-border: var(--color-border-strong);

  /* Series de datos, en orden de uso. */
  --color-data-1: var(--color-lime-300);
  --color-data-2: var(--color-amber-300);
  --color-data-3: var(--color-purple-300);
  --color-data-4: var(--color-blue-400);

  /* ── 3. Componentes ────────────────────────────────────────────── */
  --block-bg: var(--color-bg-surface);
  --block-border: var(--color-border-subtle);
  --block-radius: var(--radius-2xl);
  --block-padding: 22px;

  --panel-bg: var(--color-bg-surface);
  --panel-border: var(--color-border-subtle);
  --panel-radius: var(--radius-xl);
  --panel-padding: 26px;

  --card-bg: linear-gradient(140deg, var(--color-bg-surface-raised), var(--color-bg-surface));
  --card-border: var(--color-border-subtle);
  --card-radius: var(--radius-lg);
  --card-padding: var(--space-4) 18px;
  --card-goal-bg: linear-gradient(135deg, var(--color-accent-bg), var(--color-bg-surface) 75%);
  --card-goal-border: var(--color-accent-border);

  --button-radius: var(--radius-md);
  --button-primary-bg: var(--color-accent);
  --button-primary-bg-hover: var(--color-accent-hover);
  --button-primary-text: var(--color-text-on-accent);
  --button-secondary-border: var(--color-border-strong);
  --button-secondary-bg-hover: var(--color-bg-surface-hover);

  --button-danger-bg: var(--color-status-danger-fg);
  --button-danger-text: var(--color-coral-950);

  --dialog-bg: var(--color-bg-surface);
  --dialog-border: var(--color-border-strong);
  --dialog-radius: var(--radius-2xl);
  --dialog-backdrop: rgb(0 0 0 / .6);
  --menu-width: 300px;
  --menu-item-text-danger: var(--color-status-danger-text);

  --input-bg: var(--color-bg-input);
  --input-border: var(--color-border-strong);
  --input-radius: var(--radius-sm);

  --select-icon: var(--color-text-secondary);
  --select-padding-right: 40px;
  --menu-bg: var(--color-bg-overlay);
  --menu-border: var(--color-border-strong);
  --menu-radius: var(--radius-md);
  --menu-shadow: var(--shadow-lg);
  --menu-item-bg-hover: var(--color-bg-surface-hover);
  --menu-item-text-selected: var(--color-accent);

  --chip-bg: var(--color-bg-surface-raised);
  --chip-border: var(--color-border-subtle);
  --chip-text: var(--color-text-secondary);

  --bar-track: var(--color-border-subtle);
  --bar-fill: var(--color-accent);
  --bar-fill-warning: var(--color-status-warning-fg);

  /* Color de cada raqueta, para reconocerla de un vistazo (D-038). */
  --racket-naranja: var(--color-orange-400);
  --racket-verde: var(--color-green-400);
  --racket-azul: var(--color-blue-400);
  --racket-amarillo: var(--color-amber-300);
  --racket-morado: var(--color-purple-300);
  --racket-gris: var(--color-neutral-400);

  /* Zonas de frecuencia cardíaca de WHOOP, de 0 (reposo) a 5 (máxima), y partido/entreno (D-039). */
  --zone-0: var(--color-neutral-600);
  --zone-1: var(--color-blue-400);
  --zone-2: var(--color-green-400);
  --zone-3: var(--color-amber-300);
  --zone-4: var(--color-orange-400);
  --zone-5: var(--color-coral-300);
  --chip-match-border: var(--color-orange-400);
  --chip-practice-border: var(--color-blue-400);
  /* Áreas de ejercicio (D-042), en el orden de JuanCa. */
  --area-tenis: var(--color-lime-300);
  --area-gym: var(--color-blue-400);
  --area-sim_racing: var(--color-purple-300);
  --area-padel: var(--color-amber-300);
  --area-otro: var(--color-neutral-500);

  --chart-line: var(--color-accent);
  --chart-line-2: var(--color-blue-400); /* segunda fuente en la misma gráfica (Withings, D-033) */
  --chart-point: var(--color-text-secondary);
  --chart-grid: var(--color-border-subtle);
  --tooltip-bg: var(--color-bg-overlay);
  --tooltip-border: var(--color-border-subtle);

  /* Semáforo (D-030): zona de la card y flecha mejor/peor. Peor usa ámbar y no rojo: una flecha es un
     cambio contra la semana, no una zona; el rojo queda para la zona baja. */
  --zone-good: var(--color-status-success-fg);
  --zone-fair: var(--color-status-warning-fg);
  --zone-poor: var(--color-status-danger-fg);
  --zone-indicator-width: 2px;
  --trend-better: var(--color-status-success-fg);
  --trend-worse: var(--color-status-warning-fg);
  --trend-same: var(--color-text-secondary);

  --segmented-bg: var(--color-bg-input);
  --segmented-border: var(--color-border-strong);
  --segmented-radius: var(--radius-sm);
  --segmented-text: var(--color-text-secondary);
  --segmented-active-bg: var(--color-bg-surface-hover);
  --segmented-active-text: var(--color-text-primary);

  /* Intensidad de un malestar (D-031): 1–3 leve, 4–6 moderado, 7–10 fuerte. */
  --intensity-mild: var(--color-status-warning-text);
  --intensity-moderate: var(--color-status-warning-fg);
  --intensity-strong: var(--color-status-danger-fg);
  --intensity-none: var(--color-text-secondary);

  --toast-width: 360px;
  --toast-bg: var(--color-bg-overlay);
  --toast-text: var(--color-text-primary);
  --toast-radius: var(--radius-xl);
  --toast-padding: 14px var(--space-4);
  --toast-shadow: var(--shadow-lg);
  --toast-offset: var(--space-5);
  --toast-top: calc(var(--layout-header-height) + var(--space-3));
  --toast-enter-duration: var(--duration-base);
  --toast-exit-duration: var(--duration-fast);
}

/* Tema claro: solo cambian semánticos. Lo usa el reporte para imprimir. */
[data-theme="light"] {
  color-scheme: light;
  --color-bg-canvas: var(--color-neutral-0);
  --color-bg-surface: var(--color-neutral-50);
  --color-bg-surface-raised: var(--color-neutral-50);
  --color-border-subtle: var(--color-neutral-100);
  --color-border-strong: var(--color-neutral-300);
  --color-text-primary: var(--color-neutral-900);
  --color-text-secondary: var(--color-neutral-600);
  --color-link: var(--color-teal-700);
  --color-accent: var(--color-teal-700);
}