/* ============================================================================
   Flowerlly — el tema de las pantallas de autenticacion.

   Junto con auth.config.js es LO UNICO que este producto escribe: el HTML, el
   CSS y el JS de las cuatro pantallas viven en features/id/web y son los mismos
   para todo el taller. Aqui solo van los colores, la tipografia y el radio.

   POR QUE LOS VALORES VAN LITERALES Y NO IMPORTADOS

   El resto de flowerlly tiene sus tokens dentro de Tailwind y del <style> de
   cada pagina, no en una hoja de tokens sola que se pueda importar como hace
   matchitfy. Repetirlos aqui es la opcion honesta: es UN archivo del producto,
   no la capa compartida, asi que un literal de marca aqui esta permitido. Son
   los mismos hex que ya usaba signin.html -- verde clorofila, tinta, papel --
   para que estas pantallas y el resto del sitio sean la misma marca y no dos
   parecidas.

   El modo oscuro se declara aqui tambien: en cuanto un producto pone sus
   propios `--auth-*`, los `-fb` de la capa compartida dejan de aplicar y el
   oscuro es responsabilidad suya. Se cubre el mecanismo de la superficie
   (`data-theme` que estampa boot.js, y `prefers-color-scheme`) y de paso la
   clase `html.dark` que usa el resto de flowerlly.
   ============================================================================ */

/* Las mismas dos familias del resto del producto. Si la red las bloquea, el
   stack cae a system-ui y la pantalla sigue legible. */
@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700;800&family=Newsreader:opsz,wght@6..72,400;6..72,500;6..72,600;6..72,700&display=swap');

:root {
  --auth-font:         Figtree, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --auth-font-display: Newsreader, Georgia, "Times New Roman", serif;

  --auth-bg:      #F3F5F4;   /* fondo de pagina  (auth-surface del signin) */
  --auth-surface: #FFFFFF;   /* tarjeta y campos (auth-paper) */
  --auth-sunk:    #F3F5F4;   /* bloques de resultado */

  --auth-ink:   #14201A;
  --auth-ink-2: #3A4540;
  --auth-line:  #C5CFC9;

  /* La accion es el verde clorofila de la marca: boton, enlaces, foco y
     titulos quedan del mismo verde con el que flowerlly se reconoce. Sobre ese
     verde el texto es blanco -- no se deriva del acento, hay que decirlo. */
  --auth-accent:     #1F4A38;
  --auth-accent-ink: #FFFFFF;

  --auth-danger: #C53B3B;
  --auth-ok:     #1F4A38;

  --auth-radius: 12px;
}

/* ── Oscuro ─────────────────────────────────────────────────────────────────
   Los mismos valores que `html.dark .auth-shell` tenia en signin.html. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --auth-bg:      #14201A;
    --auth-surface: #1C2A22;
    --auth-sunk:    #14201A;
    --auth-ink:     #F3F5F4;
    --auth-ink-2:   #C5D4CC;
    --auth-line:    #2F463A;
    --auth-accent:     #9FCBB0;
    --auth-accent-ink: #14201A;
    --auth-danger: #F2C4CB;
    --auth-ok:     #9FCBB0;
  }
}

/* El interruptor manual gana sobre la preferencia del sistema, en los dos
   sentidos. boot.js estampa `data-theme`; el resto de flowerlly usa `html.dark`
   -- se cubren los dos para que la pantalla no quede a medias segun por donde
   se llegue. */
:root[data-theme="dark"],
html.dark {
  --auth-bg:      #14201A;
  --auth-surface: #1C2A22;
  --auth-sunk:    #14201A;
  --auth-ink:     #F3F5F4;
  --auth-ink-2:   #C5D4CC;
  --auth-line:    #2F463A;
  --auth-accent:     #9FCBB0;
  --auth-accent-ink: #14201A;
  --auth-danger: #F2C4CB;
  --auth-ok:     #9FCBB0;
}