/*
 ╔═══════════════════════════════════════════════════════════════════╗
 ║  PhysiqAI — theme.css                                             ║
 ║  Theme System — Sprint UI Global (portado de OutfitAI)            ║
 ║                                                                     ║
 ║  Arquitectura:                                                     ║
 ║    :root                    → 🌙 Dark (por defecto, valores       ║
 ║                                actuales de la app, sin cambio)    ║
 ║    html[data-theme="light"] → ☀️ Light (nuevo, opcional)          ║
 ║                                                                     ║
 ║  El override usa el selector con ámbito "html[data-theme=...]",   ║
 ║  NUNCA "[data-theme=...]" a secas — este último coincide con      ║
 ║  cualquier elemento que tenga ese atributo, y esta misma app ya    ║
 ║  usa data-theme="<id>" en los botones del selector de card-themes ║
 ║  (buildThemePicker, index.html). Ese sistema es independiente de  ║
 ║  este archivo y no debe verse afectado por él.                    ║
 ║                                                                     ║
 ║  --accent y --t-elite son el mismo verde lima de marca (#c8ff00)  ║
 ║  usado como FONDO (botones/badges) en ambos modos — ahí el        ║
 ║  contraste siempre es correcto porque el texto encima es oscuro.  ║
 ║  Cuando se usan como COLOR DE TEXTO directo, usar --accent-text /  ║
 ║  --t-elite-text en su lugar: en dark son el mismo verde lima      ║
 ║  (ya tiene contraste de sobra sobre #0a0a0a); en light son una    ║
 ║  variante más oscura para no perder legibilidad.                  ║
 ╚═══════════════════════════════════════════════════════════════════╝
*/

/* ─────────────────────────────────────────────────────────────────
   1. TOKENS ESTÁTICOS — compartidos por ambos modos, nunca cambian
   ───────────────────────────────────────────────────────────────── */
:root {
  --radius: 16px;
  --fd: 'Bebas Neue', sans-serif;
  --fb: 'DM Sans', sans-serif;
  --ff: 'DM Sans', sans-serif;

  /* Texto sobre --accent (botones/badges de marca) — --accent es el mismo
     verde lima en ambos modos, así que el texto que va ENCIMA también debe
     ser constante. Antes de este token, ese texto usaba var(--black) (el
     color de fondo de página) asumiendo que siempre es oscuro — cierto en
     dark, pero en light --black se invierte a un tono casi blanco, dejando
     texto casi-blanco sobre fondo lima: contraste ~1.1:1, ilegible. */
  --on-accent: #0a0a0a;
}

/* ─────────────────────────────────────────────────────────────────
   2. 🌙 DARK — modo por defecto (:root sin atributo)
      Son los valores que ya usaba toda la app antes de este sprint,
      sin ningún cambio — cero riesgo visual para quien no reciba
      el atributo data-theme (JS bloqueado, etc.).
   ───────────────────────────────────────────────────────────────── */
:root {
  /* Superficies */
  --black: #0a0a0a;
  --card:  #141414;
  --gray1: #1a1a1a;
  --gray2: #2a2a2a;
  --gray3: #444;

  /* Texto */
  --white: #f5f2ee;
  --gray4: #888;
  --gray5: #bbb;

  /* Marca / estado */
  --accent:      #c8ff00;
  --accent-text: #c8ff00;
  --red:   #ff4d1c;
  --amber: #f5a623;
  --green: #39d98a;

  /* Bordes */
  --border: rgba(255,255,255,0.07);

  /* Extras por página (avatar, nutrición) */
  --gold:     #ffd700;
  --gold-dim: #9c7a00;
  --protein:  #ff8a6b;
  --carbs:    #ffd166;
  --fat:      #7ec8ff;
  --lvl-beginner:     #c2c2ca;
  --lvl-intermediate: #5ce678;
  --coral: #ff8a6b;

  /* Score tiers (index.html) */
  --t-low:   #FF4D4D;
  --t-avg:   #FF8A00;
  --t-good:  #F5B335;
  --t-adv:   #35F29A;
  --t-elite: #C8FF00;
  --t-elite-text: #C8FF00;

  /* Sombras (nuevas — no existían tokens antes de este sprint) */
  --shadow-card:  0 2px 10px rgba(0,0,0,0.35);
  --shadow-modal: 0 12px 40px rgba(0,0,0,0.5);
  --shadow-popup: 0 8px 24px rgba(0,0,0,0.4);

  /* Fondo del header sticky con blur — antes hardcoded como
     rgba(10,10,10,.92) en cada página, idéntico al valor de --black
     con alpha; ahora es un token para que siga a --black en light */
  --color-header-bg: rgba(10,10,10,0.92);
}

/* ─────────────────────────────────────────────────────────────────
   3. ☀️ LIGHT — activado con data-theme="light" en <html>
   ───────────────────────────────────────────────────────────────── */
html[data-theme="light"] {
  /* Superficies — marfil cálido, misma familia editorial que el resto
     del branding, ajustado para convivir con el verde lima */
  --black: #f7f6f1;
  --card:  #efeee6;
  --gray1: #e7e5db;
  --gray2: #dbd8cc;
  --gray3: #a39d8c;

  /* Texto */
  --white: #17160f;
  --gray4: #6b6656;
  --gray5: #454133;

  /* Marca / estado — el fondo del acento no cambia (sigue siendo
     verde lima, sigue funcionando porque el texto encima es oscuro);
     accent-text sí cambia a una variante oscura para legibilidad */
  --accent:      #c8ff00;
  --accent-text: #0b7307;
  --red:   #d6331a;
  --amber: #b06a06;
  --green: #1f9e63;

  /* Bordes */
  --border: rgba(20,18,10,0.12);

  /* Extras por página */
  --gold:     #a8890a;
  --gold-dim: #7a6207;
  --protein:  #c8501f;
  --carbs:    #a9720a;
  --fat:      #1868a8;
  --lvl-beginner:     #5a5a66;
  --lvl-intermediate: #1f8a4a;
  --coral: #c8501f;

  /* Score tiers — valores propios para light (PhysiqAI resuelve aquí
     el mismo problema de contraste que OutfitAI dejó pendiente en su
     propio theme.css: los tier colors originales son demasiado claros
     para usarse como texto sobre un fondo claro).
     Auditoría de contraste 2026-07-23: estos 5 valores se recalcularon
     para pasar AA (>=4.5:1) contra los 3 fondos reales donde se usan
     como texto (--black #f7f6f1, --card #efeee6, --gray2 #dbd8cc, el
     más exigente de los tres) — los valores anteriores solo se habían
     verificado contra un fondo genérico y fallaban en pills/badges
     sobre --gray2. Mismo matiz que el dark mode, solo más oscuros. */
  --t-low:   #ae1313;
  --t-avg:   #823c0d;
  --t-good:  #79510c;
  --t-adv:   #0a6136;
  --t-elite: #C8FF00;
  --t-elite-text: #0d610a;

  /* Sombras — más suaves, propias de superficies claras */
  --shadow-card:  0 1px 4px rgba(20,18,10,0.08);
  --shadow-modal: 0 12px 32px rgba(20,18,10,0.16);
  --shadow-popup: 0 8px 20px rgba(20,18,10,0.14);

  --color-header-bg: rgba(247,246,241,0.92);
}

/* ─────────────────────────────────────────────────────────────────
   4. Botón de toggle claro/oscuro (header, todas las páginas)
   ───────────────────────────────────────────────────────────────── */
.header-right{display:flex;align-items:center;gap:10px}
.theme-toggle-btn{background:none;border:none;cursor:pointer;color:var(--gray4);width:34px;height:34px;border-radius:8px;display:flex;align-items:center;justify-content:center;transition:color .18s,background .18s;flex-shrink:0;padding:0}
.theme-toggle-btn:hover{color:var(--white);background:var(--gray1)}
.theme-toggle-btn .icon-sun{display:none}
.theme-toggle-btn .icon-moon{display:block}
html[data-theme="light"] .theme-toggle-btn .icon-sun{display:block}
html[data-theme="light"] .theme-toggle-btn .icon-moon{display:none}