/* =====================================================================
   Tándem Coach · tokens de diseño (generado desde tokens.json, 2026-10-18)
   Se carga DESPUÉS de css/app.css (mismo selector :root → gana el último), o se
   sustituyen por este archivo las líneas 2-17 de app.css. Contraste: 70 pares, 0 fallos AA.
   Los colores de marca (--oro, --negro, --hueso, --granate) los sigue poniendo
   config.js con la marca de cada entrenador; los roles salen de ellos.
   ===================================================================== */
:root {
  /* Marca (valores por defecto de Daniel; config.js los sustituye por los del espacio) */
  --oro: #D4A72C; --negro: #0E0E0E; --hueso: #F2EDE3; --granate: #7A1F2B;

  /* Roles de color · claro */
  --bg: var(--hueso);
  --surface: #FFFFFF;
  --surface-2: var(--hueso);
  --border: #E2DBCD;            /* decorativo: separadores */
  --border-input: #8A8478;      /* 3,72:1 sobre surface (antes #E2DBCD, 1,38:1) */
  --text: var(--negro);
  --text-muted: #65615A;        /* antes #6B6760: 4,41:1 sobre accent-soft (BUG-004) */
  --accent: var(--oro);         /* rellenos: botón principal, progreso */
  --on-accent: #0E0E0E;
  --accent-ink: #7A5D0F;        /* texto dorado sobre fondos claros (antes oro, 1,92:1) */
  --accent-soft: #F3E3B3;
  --accent-2: var(--granate);   /* rellenos: insignias, botón de peligro */
  --on-accent-2: #FFFFFF;
  --link: var(--granate);
  --danger-ink: var(--granate);
  --danger-soft: #F8E1E4;
  --success: #276B43;           /* antes #2E7D4F: 4,20:1 sobre success-soft */
  --on-success: #FFFFFF;
  --success-ink: #276B43;
  --success-soft: #DCEFE3;
  --night: var(--negro);        /* barra superior, pestañas, aviso flotante */
  --on-night: var(--hueso);
  --nav-inactive: #9A958B;
  --focus: #7A5D0F;             /* anillo de foco (antes oro, 2,24:1) */

  /* Tipografía */
  --font-display: 'Oswald', 'Arial Narrow', sans-serif;
  --font-sans: 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'Roboto Mono', ui-monospace, monospace;
  --fs-xs: 12px;  --lh-xs: 16px;
  --fs-sm: 14px;  --lh-sm: 20px;
  --fs-md: 16px;  --lh-md: 22px;
  --fs-base: 18px; --lh-base: 26px;
  --fs-lg: 20px;  --lh-lg: 26px;
  --fs-xl: 24px;  --lh-xl: 30px;
  --fs-2xl: 28px; --lh-2xl: 32px;
  --fs-3xl: 36px; --lh-3xl: 40px;
  --fs-display: 56px; --lh-display: 60px;

  /* Espacio, radio, sombra, movimiento, medidas */
  --sp-0: 0; --sp-1: 2px; --sp-2: 4px; --sp-3: 8px; --sp-4: 12px; --sp-5: 16px; --sp-6: 24px; --sp-7: 32px; --sp-8: 48px; --sp-9: 64px;
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 22px; --r-pill: 999px;
  --shadow-card: 0 2px 10px rgba(14,14,14,.08);
  --shadow-pop: 0 8px 24px rgba(0,0,0,.18);
  --shadow-sheet: 0 -6px 30px rgba(0,0,0,.25);
  --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 400ms; --ease: cubic-bezier(.2,.8,.2,1);
  --client-max: 640px; --coach-max: 1100px; --gutter: 16px; --tap-min: 48px;

  /* Alias para app.css actual (migración gradual: no hay que tocar todas las reglas a la vez) */
  --ink: var(--text); --gris: var(--text-muted); --linea: var(--border);
  --verde: var(--success); --verde-claro: var(--success-soft);
  --oro-claro: var(--accent-soft); --gold-soft: var(--accent-soft);
  --ok-soft: var(--success-soft); --err-soft: var(--danger-soft);
  --inp-bg: var(--surface); --radio: var(--r-lg); --sombra: var(--shadow-card);
  --titulo: var(--font-display); --texto: var(--font-sans);
}

/* Roles de color · oscuro (app del cliente: Perfil → Apariencia) */
:root[data-theme="dark"] {
  --bg: var(--negro);
  --surface: #191919;
  --surface-2: #232323;
  --border: #2F2F2F;
  --border-input: #6F6A62;      /* 3,28:1 */
  --text: var(--hueso);
  --text-muted: #A39E94;
  --accent-ink: var(--oro);
  --accent-soft: #3E351D;       /* = color-mix(oro 20%, #191919) */
  --link: #E8909B;              /* granate aclarado (antes granate, 1,72:1) */
  --danger-ink: #F2A1AA;
  --danger-soft: #3A1418;
  --success: #2E7D4F;
  --success-ink: #7FCB9A;
  --success-soft: #15301F;
  --night: #050505;
  --focus: var(--oro);
  --shadow-card: none;
  --inp-bg: #232323;
  color-scheme: dark;
}

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