/* css/ui/tema-rosa.css
   Apariencia «Rosa» (html.tema-rosa): el mismo vidrio esmerilado de «Azul», con la paleta
   rosa. Fondo ciruela casi negro con círculos grandes rosa fuerte, rubor, orquídea y un vino
   profundo (el equivalente al índigo de «Azul»), la gama de neón de rosa a orquídea y rubor
   (nada de azul ni cian) y la G toda blanca.
   Cómo funciona: con «Rosa» app/lite.js pone html.tema-claro Y html.tema-rosa (ver
   app/ui/tema.js), así todas las reglas del vidrio de css/ui/tema-claro.css se aplican igual;
   este archivo se carga justo después y solo cambia colores: los tokens y las pocas reglas de
   «Azul» que tienen el marino o el azul escritos a mano. Mismo peso que la regla de «Azul»
   que pisa, gana por venir después. Sin html.tema-rosa no cambia nada: TODO va bajo
   html.tema-rosa.
   Quedan igual que en «Azul» los colores que no son decoración: el rojo de borrar y de
   alerta, el ámbar de aviso y el dorado de los récords. «Completado» usa, como en «Azul»,
   un color de la gama (la orquídea clara, que no se confunde con el rojo).
   Neón apagado (html.sin-neon, css/ui/sin-neon.css, que se carga después): lo suyo va al
   final con un html.tema-claro.tema-rosa.sin-neon, que le gana por peso. */

/* ---------- Tokens ---------- */
html.tema-rosa {
  /* base: ciruela casi negra, con superficies de vidrio esmerilado encima */
  --gize-bg: #14060F;
  --gize-surface: #2A1023;     /* vidrio "sólido": donde el borde de neón necesita un fondo opaco */
  --gize-surface-2: #33162B;   /* campos, pestañas */
  --gize-text-2: #E8D0DC;      /* gris rosado claro (se lee sobre el vidrio aunque pase un círculo detrás) */

  /* vidrio: el mismo blanco translúcido de «Azul», sobre un velo ciruela (tinte rosa leve) */
  --gize-glass: linear-gradient(160deg, rgba(255,255,255,.19), rgba(255,255,255,.11) 38%, rgba(255,255,255,.12)) rgba(36,8,28,.32);
  --gize-glass-hi: linear-gradient(160deg, rgba(255,255,255,.24), rgba(255,255,255,.15) 38%, rgba(255,255,255,.16)) rgba(36,8,28,.32);
  --gize-glass-sheet: linear-gradient(160deg, rgba(255,255,255,.17), rgba(255,255,255,.10) 38%, rgba(255,255,255,.11)) rgba(36,9,28,.55);

  /* marca: rosa (foco, acción, enlaces; más claro que el neón para leerse sobre el vidrio) */
  --gize-blue: #FF7DB8;
  --gize-blue-deep: #E0357F;

  /* gama de neón: rosa fuerte, orquídea, rubor y magenta */
  --gize-r1: #FF5FA8;
  --gize-r2: #D65CF5;
  --gize-r3: #FFA3C8;
  --gize-r4: #E84DBE;
  /* círculos grandes del fondo: rosa fuerte, orquídea, rubor y vino profundo */
  --gize-orbs:
    radial-gradient(62vmax 62vmax at 0% 0%, rgba(255,95,168,.40), rgba(240,54,138,.22) 42%, transparent 70%),
    radial-gradient(52vmax 52vmax at 104% 20%, rgba(214,92,245,.42), rgba(168,59,224,.23) 42%, transparent 70%),
    radial-gradient(64vmax 64vmax at 100% 104%, rgba(255,163,200,.27), rgba(255,125,176,.14) 42%, transparent 70%),
    radial-gradient(50vmax 50vmax at -4% 78%, rgba(122,23,71,.72), rgba(90,15,53,.28) 45%, transparent 70%);

  /* semánticos: «completado» con la orquídea clara de la gama */
  --gize-success: #E596FF;
  --gize-success-bg: rgba(229,150,255,.12);
}

/* ---------- Brillos y velos que «Azul» tiene escritos en azul o marino ---------- */
html.tema-rosa .gize-input:focus { box-shadow: 0 0 0 3px rgba(255,95,168,.22); }
html.tema-rosa .sheet-bg { background: rgba(20,6,15,.55); }
html.tema-rosa .cp-bg { background: rgba(20,6,15,.65); }
html.tema-rosa .tpick-bg { background: rgba(20,6,15,.6); }
html.tema-rosa .fb-bg { background: rgba(20,6,15,.78); }
html.tema-rosa #streakHost .stk-bg { background: rgba(20,6,15,.6); }
html.tema-rosa .crp { background: rgba(20,6,15,.78); }
html.tema-rosa .upd-forzada { background: rgba(20,6,15,.72); }
html.tema-rosa .upd-card { background: rgba(40,12,31,.9); }
html.tema-rosa body.silk-coach :is(.co-note, .co-search, .co-dayname, .ml-in, .opt-body):focus { background: rgba(40,12,31,.9); }
html.tema-rosa body:not(#_) .navbar { background: linear-gradient(rgba(255,255,255,.10), rgba(255,255,255,.06)) rgba(36,8,28,.5); }
html.tema-rosa .plan-tabs { background: rgba(40,12,31,.86); }

/* Llama de la racha (app/ui/racha.js): orquídea por fuera y rosa por dentro. */
html.tema-rosa .flame linearGradient[id$="o"] stop:nth-child(1) { stop-color: #F4D0FF; }
html.tema-rosa .flame linearGradient[id$="o"] stop:nth-child(2) { stop-color: #D65CF5; }
html.tema-rosa .flame linearGradient[id$="o"] stop:nth-child(3) { stop-color: #A83BE0; }
html.tema-rosa .flame linearGradient[id$="i"] stop:nth-child(2) { stop-color: #FFD3E6; }
html.tema-rosa .flame linearGradient[id$="i"] stop:nth-child(3) { stop-color: #FF5FA8; }

/* ---------- El logo «Rosa»: G blanca con el orbe rosa, orquídea, rubor y magenta ---------- */
html.tema-rosa :is(.brand-logo, .auth-brand-ic img, .upd-marca) { content: url("../../brand/logo/gize-marca-rosa.svg"); }
html.tema-rosa .co-brand .brand-logo { content: url("../../brand/logo/gize-firma-horizontal-rosa.svg"); }

/* Splash: el orbe con la paleta rosa sale de css/core/splash.css. */

/* ---------- Modo liviano con «Rosa» (html.lite.tema-rosa) ----------
   Igual que el liviano de «Azul» (sin backdrop-filter, vidrio casi sólido), en ciruela. La app
   de Android (html.android-app) va siempre así. */
html.lite.tema-rosa, html.android-app.tema-rosa {
  --gize-glass: linear-gradient(160deg, rgba(255,255,255,.13), rgba(255,255,255,.07) 38%, rgba(255,255,255,.08)) rgb(40,15,33);
  --gize-glass-hi: linear-gradient(160deg, rgba(255,255,255,.17), rgba(255,255,255,.10) 38%, rgba(255,255,255,.11)) rgb(40,15,33);
  --gize-glass-sheet: linear-gradient(160deg, rgba(255,255,255,.12), rgba(255,255,255,.06)) rgb(36,12,29);
}
html.lite.tema-rosa body:not(#_) .navbar, html.android-app.tema-rosa body:not(#_) .navbar { background: rgb(42,15,34); }
html.lite.tema-rosa body:not(#_) :is(.sheet, .auth-card), html.lite.tema-rosa body.silk-coach :is(.cp-modal, .cp-ccard),
html.android-app.tema-rosa body:not(#_) :is(.sheet, .auth-card), html.android-app.tema-rosa body.silk-coach :is(.cp-modal, .cp-ccard) {
  background: linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.03)) rgb(32,10,26); }

/* ---------- Neón apagado con «Rosa» (html.sin-neon) ----------
   Como «Azul» sin neón (blancos y grises, ver css/ui/sin-neon.css), con los círculos del
   fondo apagados en un rosado sin saturación y los colores de grupo muscular del coach en la
   paleta rosa (identifican, no decoran). */
html.tema-claro.tema-rosa.sin-neon {
  --purple: #D65CF5; --pink: #FF5FA8; --cyan: #FFA3C8;
  --gize-orbs:
    radial-gradient(62vmax 62vmax at 0% 0%, rgba(196,158,178,.24), rgba(160,118,140,.11) 42%, transparent 70%),
    radial-gradient(52vmax 52vmax at 104% 20%, rgba(190,170,190,.17), rgba(140,120,140,.08) 42%, transparent 70%),
    radial-gradient(64vmax 64vmax at 100% 104%, rgba(200,168,184,.19), rgba(150,118,136,.08) 42%, transparent 70%),
    radial-gradient(50vmax 50vmax at -4% 78%, rgba(78,28,56,.55), rgba(78,28,56,.2) 45%, transparent 70%);
}