/* ===================================================================
   MÉTODO RECOMP · TOKENS DE COLOR Y TIPOGRAFÍA
   ===================================================================
   Propio de la app para personas. Hasta la versión anterior se copiaba
   desde app-coach; se separó cuando Recomp pasó a tener identidad propia
   (oscura, lima y lavanda). Ya NO lo toca tools\sync-motor.ps1: la app
   del gimnasio conserva su verde pino.

   Cómo está armado:

   1. :root define el tema OSCURO, que es la identidad de la app y el
      valor por defecto. Todo token existe ahí, sin excepción.
   2. El tema claro solo REDEFINE valores. Se aplica cuando se elige
      a mano (data-theme="light") o en "Automático" con el sistema
      en claro. Nunca declara un token nuevo.

   REGLA AL ESCRIBIR COMPONENTES: nunca poner un color literal. Si hace
   falta uno que no está acá, se agrega acá primero, con su valor oscuro
   y su valor claro.

   LA TRAMPA DE ESTA PALETA: el lima es un color CLARO. Los botones
   llevan texto oscuro encima (--on-primary), no blanco. Y como texto
   sobre fondo blanco no se lee: en el tema claro --primary-ink pasa a
   un verde oliva. Relleno y tinta son dos tokens distintos por eso.
   =================================================================== */

:root{
  /* ---- Tipografía ---------------------------------------------- */
  --font-body:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display:'Space Grotesk', 'Inter', system-ui, sans-serif;
  --font-num:'Space Grotesk', 'Inter', system-ui, sans-serif;

  /* ---- Radios --------------------------------------------------- */
  --r-sm:10px;
  --r-md:16px;
  --r-lg:22px;

  /* ---- Neutros (oscuro) ------------------------------------------ */
  --bg:#0F1115;
  --bg-alt:#14171C;
  --surface:#181B21;
  --surface-2:#1F232B;
  --border:#272C35;
  --border-strong:#363C47;
  --text:#F2F4F7;
  --text-muted:#A3AAB8;
  --text-faint:#7C8494;

  /* ---- Lima: la identidad ---------------------------------------- */
  --primary:#C6F432;
  --primary-hover:#D4FA5A;
  --primary-ink:#C6F432;
  --primary-soft:#232B12;
  --on-primary-soft:#D8F77A;
  --on-primary:#0F1115;

  /* ---- Acento lavanda -------------------------------------------- */
  --accent:#7C8CFF;
  --accent-ink:#A3AEFF;
  --accent-soft:#1E2140;
  --on-accent-soft:#C3CAFF;
  --on-accent:#0F1115;

  /* ---- Estados ---------------------------------------------------- */
  --danger:#FF6B5B;
  --danger-ink:#FF8A7D;
  --danger-soft:#3A1A17;
  --on-danger-soft:#FFB4AB;
  --on-danger:#0F1115;

  --warn:#FFB547;
  --warn-ink:#FFC56E;
  --warn-soft:#33260F;
  --on-warn-soft:#FFD89A;

  --ok:#C6F432;
  --ok-soft:#232B12;
  --on-ok-soft:#D8F77A;

  /* ---- Gráficos ---------------------------------------------------- */
  --c1:#C6F432;
  --c2:#7C8CFF;
  --c3:#FFB547;
  --c4:#4FD1C5;
  --c5:#FF6B9A;
  --c6:#9AA4B2;
  --chart-grid:#272C35;
  --chart-text:#7C8494;
  --chart-punto:#56652A;

  /* ---- Marca (lo usa el ícono y la pantalla de acceso) ----------- */
  --marca:#C6F432;
  --marca-oscuro:#9BC21F;
  --on-marca:#0F1115;

  /* ---- Superficies elevadas --------------------------------------- */
  --sombra:0 1px 2px rgba(0,0,0,.35), 0 8px 24px rgba(0,0,0,.25);
  --sombra-fuerte:0 10px 40px rgba(0,0,0,.55);
  --glow:0 0 0 1px rgba(198,244,50,.25), 0 8px 30px rgba(198,244,50,.12);
  --hero-grad:linear-gradient(145deg, #1D2410 0%, #181B21 55%, #1B1E36 100%);
  --barra-blur:rgba(15,17,21,.82);

  /* ---- Nombres viejos ---------------------------------------------
     Los usa el HTML y el JS que ya existían. VALORES LITERALES, no
     var(): con alias encadenados, al cambiar de tema en caliente los
     elementos no se recalculan hasta recargar.

     --white quedó SOLO para texto sobre rellenos de color (botones,
     pastillas). Con el lima de relleno, ese texto es oscuro. */
  --paper:#0F1115;
  --paper-alt:#1F232B;
  --card:#181B21;
  --ink:#F2F4F7;
  --ink-soft:#A3AAB8;
  --pine:#C6F432;
  --pine-dark:#C6F432;
  --pine-tint:#232B12;
  --pine-900:#0F1115;
  --gold:#7C8CFF;
  --gold-tint:#1E2140;
  --danger-tint:#3A1A17;
  --warn-tint:#33260F;
  --line:#272C35;
  --white:#0F1115;

  color-scheme:dark;
}


/* ===================================================================
   TEMA CLARO
   ===================================================================
   Dos entradas con los mismos valores: elegido a mano, o "Automático"
   con el sistema en claro. Se repiten porque un selector no puede
   heredar de otro en CSS.
   =================================================================== */
@media (prefers-color-scheme: light){
  :root[data-theme="auto"]{
    --bg:#F5F6F8;
    --bg-alt:#ECEEF2;
    --surface:#FFFFFF;
    --surface-2:#F7F8FA;
    --border:#E3E6EB;
    --border-strong:#CDD2DA;
    --text:#111418;
    --text-muted:#5A6270;
    --text-faint:#6B7280;

    --primary:#C6F432;
    --primary-hover:#B8E61F;
    --primary-ink:#4D6B00;
    --primary-soft:#EEF9CC;
    --on-primary-soft:#3B5200;
    --on-primary:#111418;

    --accent:#6E7CF5;
    --accent-ink:#4A58D8;
    --accent-soft:#E8EAFE;
    --on-accent-soft:#2E3899;
    --on-accent:#111418;

    --danger:#E5484D;
    --danger-ink:#C9373C;
    --danger-soft:#FDE8E7;
    --on-danger-soft:#7A1C1F;
    --on-danger:#FFFFFF;

    --warn:#D98A00;
    --warn-ink:#8A5A00;
    --warn-soft:#FFF3DB;
    --on-warn-soft:#5C3B00;

    --ok:#4D6B00;
    --ok-soft:#EEF9CC;
    --on-ok-soft:#3B5200;

    --c1:#6E9600;
    --c2:#5B6CF0;
    --c3:#D98A00;
    --c4:#0FA3A3;
    --c5:#E0487A;
    --c6:#6B7280;
    --chart-grid:#E3E6EB;
    --chart-text:#6B7280;
    --chart-punto:#C9E48A;

    --marca:#C6F432;
    --marca-oscuro:#4D6B00;
    --on-marca:#111418;

    --sombra:0 1px 2px rgba(17,20,24,.05), 0 6px 20px rgba(17,20,24,.06);
    --sombra-fuerte:0 10px 36px rgba(17,20,24,.18);
    --glow:0 0 0 1px rgba(77,107,0,.18), 0 8px 26px rgba(110,150,0,.12);
    --hero-grad:linear-gradient(145deg, #F1FAD6 0%, #FFFFFF 55%, #EEF0FF 100%);
    --barra-blur:rgba(245,246,248,.85);

    --paper:#F5F6F8;
    --paper-alt:#ECEEF2;
    --card:#FFFFFF;
    --ink:#111418;
    --ink-soft:#5A6270;
    --pine:#C6F432;
    --pine-dark:#4D6B00;
    --pine-tint:#EEF9CC;
    --pine-900:#111418;
    --gold:#6E7CF5;
    --gold-tint:#E8EAFE;
    --danger-tint:#FDE8E7;
    --warn-tint:#FFF3DB;
    --line:#E3E6EB;
    --white:#111418;

    color-scheme:light;
  }
}

:root[data-theme="light"]{
  --bg:#F5F6F8;
  --bg-alt:#ECEEF2;
  --surface:#FFFFFF;
  --surface-2:#F7F8FA;
  --border:#E3E6EB;
  --border-strong:#CDD2DA;
  --text:#111418;
  --text-muted:#5A6270;
  --text-faint:#6B7280;

  --primary:#C6F432;
  --primary-hover:#B8E61F;
  --primary-ink:#4D6B00;
  --primary-soft:#EEF9CC;
  --on-primary-soft:#3B5200;
  --on-primary:#111418;

  --accent:#6E7CF5;
  --accent-ink:#4A58D8;
  --accent-soft:#E8EAFE;
  --on-accent-soft:#2E3899;
  --on-accent:#111418;

  --danger:#E5484D;
  --danger-ink:#C9373C;
  --danger-soft:#FDE8E7;
  --on-danger-soft:#7A1C1F;
  --on-danger:#FFFFFF;

  --warn:#D98A00;
  --warn-ink:#8A5A00;
  --warn-soft:#FFF3DB;
  --on-warn-soft:#5C3B00;

  --ok:#4D6B00;
  --ok-soft:#EEF9CC;
  --on-ok-soft:#3B5200;

  --c1:#6E9600;
  --c2:#5B6CF0;
  --c3:#D98A00;
  --c4:#0FA3A3;
  --c5:#E0487A;
  --c6:#6B7280;
  --chart-grid:#E3E6EB;
  --chart-text:#6B7280;
  --chart-punto:#C9E48A;

  --marca:#C6F432;
  --marca-oscuro:#4D6B00;
  --on-marca:#111418;

  --sombra:0 1px 2px rgba(17,20,24,.05), 0 6px 20px rgba(17,20,24,.06);
  --sombra-fuerte:0 10px 36px rgba(17,20,24,.18);
  --glow:0 0 0 1px rgba(77,107,0,.18), 0 8px 26px rgba(110,150,0,.12);
  --hero-grad:linear-gradient(145deg, #F1FAD6 0%, #FFFFFF 55%, #EEF0FF 100%);
  --barra-blur:rgba(245,246,248,.85);

  --paper:#F5F6F8;
  --paper-alt:#ECEEF2;
  --card:#FFFFFF;
  --ink:#111418;
  --ink-soft:#5A6270;
  --pine:#C6F432;
  --pine-dark:#4D6B00;
  --pine-tint:#EEF9CC;
  --pine-900:#111418;
  --gold:#6E7CF5;
  --gold-tint:#E8EAFE;
  --danger-tint:#FDE8E7;
  --warn-tint:#FFF3DB;
  --line:#E3E6EB;
  --white:#111418;

  color-scheme:light;
}