/* ════════════════════════════════════════════════════════════════════════
   comun/css/tema.css · Identidad visual compartida por el pomodoro y la tienda
   ------------------------------------------------------------------------
   1. Fuentes (alojadas en comun/fuentes, sin depender de Google)
   2. Colores modo DÍA (sol) — paleta de «Las Estaciones», Mucha 1896
   3. Colores modo NOCHE (luna) — azul tinta y crema
   4. Clases de color para las ilustraciones SVG (f-* relleno, s-* trazo)
   5. Variante nocturna «La Luna y las Estrellas» (solo con data-noche="estrellas")

   Regla: ningún otro archivo CSS escribe colores en hexadecimal; todos
   usan estas variables. Para cambiar un color del sitio, cámbialo aquí.
   ════════════════════════════════════════════════════════════════════════ */

/* ---------- 1. Fuentes ---------- */
@font-face { font-family: "Federo"; src: url("../fuentes/federo-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
/* Cormorant Garamond variable (Beta 1.4): un archivo normal y uno cursiva cubren los pesos 300–700
   (antes, cinco archivos de peso fijo: 117 KB → 77 KB, y dos descargas en lugar de hasta cinco) */
@font-face { font-family: "Cormorant Garamond"; src: url("../fuentes/cormorant-variable.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("../fuentes/cormorant-variable-italica.woff2") format("woff2"); font-weight: 300 700; font-style: italic; font-display: swap; }

:root {
  --display: "Federo", "Cormorant Garamond", Georgia, serif;   /* títulos, botones, números */
  --texto: "Cormorant Garamond", Georgia, serif;               /* texto corrido */
}

/* ---------- 2. Modo día (sol) ---------- */
:root {
  color-scheme: light;
  /* Fondos y tinta */
  --papel: #f4e6c8; --papel-2: #ead2a4; --marfil: #fbf3e2; --blanco: #fffaf0;
  --contorno: #5a2f1a; --tinta: #3f2416; --sepia: #6f4a33; --cuerpo: #4a2c1d;
  /* Oro */
  --oro: #c08a45; --oro-claro: #e2bd81; --oro-palido: #f0dcb4;
  /* Acentos de la paleta */
  --olivo: #6b6d34; --olivo-osc: #555726; --salvia: #b3b07a; --salvia-palida: #ecebc4; --cerezo: #efc0b0;
  --terracota: #a94c24; --terracota-osc: #8b3b19; --coral: #e49254; --melocoton: #f5c08e;
  --ciruela: #5b2d4a; --lavanda: #b89ab0; --lavanda-palida: #efdde3;
  --amapola: #b0391f; --agua: #3f7f72;
  --girasol: #7f5c1d; --girasol-palido: #f3e2b8; --rosa: #a3485e; --rosa-palida: #f5dde0;
  /* --girasol (rótulos) era #8a6420 hasta la Beta 1.6: daba 4,3:1 sobre --papel; #7f5c1d da 4,9:1 con el mismo tono */
  --sobre-acento: #fbf3e2;   /* texto sobre un botón de color */
  /* Campos de color de cada estación (fondos suaves) */
  --campo-verano: #f8d2ab; --int-verano: #fbe6cf;
  --campo-primavera: #ecebc4; --int-primavera: #f5f3dc;
  --campo-invierno: #d6eadf; --int-invierno: #ebf4ee;
  /* Banda oscura (ventajas y pie) */
  --banda: #3f2416; --banda-texto: #ead8b8; --banda-titulo: #fbf3e2; --banda-oro: #e2bd81; --banda-linea: rgba(226,189,129,.28);
  /* Efectos */
  --sombra: rgba(90,47,26,.32); --velo: rgba(63,36,22,.6); --cabecera: rgba(244,230,200,.94); --fila-par: rgba(240,220,180,.3);
  --filtro-lamina: none; --foto: #fffdf8; --filtro-foto: none;
  /* Interruptor sol/luna */
  --pista: #f3dcb0; --perilla: #e7a843; --perilla-ico: #5a2f1a;
  /* Texturas. Fondo sereno: solo el grano en los dos sitios (Beta 1.5). encaje.svg queda como recurso opcional. */
  --friso: url("../img/friso.svg");
  --fondo-pagina: url("../img/grano.svg");
  --fondo-tamano: 220px;
  /* Sol de día, luna de noche: el centro del filete de los títulos (comun/js/arte.js) */
  --ver-sol: inline; --ver-luna: none;
}

/* ---------- 2b. Roles de color (Beta 1.6) ----------
   El código usa roles, no colores: así el terracota no se reparte por todas partes y una piel
   futura solo cambia a qué color apunta cada rol. Valen para día y noche (apuntan a variables).
   --accion       botón principal (Comenzar, Ver los modelos, Pedir por WhatsApp)
   --estado       lo actual: pestaña elegida, etapa (el pomodoro lo cambia por etapa con --acento)
   --enlace       enlaces y navegación en reposo · --enlace-activo al pasar el cursor o elegido
   --rotulo       rótulos pequeños en versalitas (EN CURSO, DOS MODELOS…)
   --linea-suave  contornos secundarios y divisores */
:root {
  --accion: var(--terracota); --accion-hover: var(--terracota-osc); --sobre-accion: var(--sobre-acento);
  --estado: var(--terracota); --enlace: var(--sepia); --enlace-activo: var(--tinta);
  --rotulo: var(--girasol); --linea-suave: var(--oro-claro);
}

/* ---------- 3. Modo noche (luna) ----------
   comun/js/tema.js pone data-tema="noche" en <html> si la persona lo elige
   o, si nunca eligió, entre las 18:00 y las 05:59 (hora local). */
:root[data-tema="noche"] {
  color-scheme: dark;
  --papel: #1c2230; --papel-2: #343c4d; --marfil: #252c3b; --blanco: #2b3343;
  --contorno: #9c8867; --tinta: #ece3d1; --sepia: #b3ab9c; --cuerpo: #141923;
  --oro: #c2a06a; --oro-claro: #5d5544; --oro-palido: #363d4c;
  --olivo: #a9b47c; --olivo-osc: #bcc690; --salvia: #7c8562; --salvia-palida: #2e3628; --cerezo: #d6a698;
  --terracota: #e0967a; --terracota-osc: #eaa98f; --coral: #d98c66; --melocoton: #d9a77f;
  --ciruela: #c8a2c2; --lavanda: #8a7591; --lavanda-palida: #352c3c;
  --amapola: #e58a6e; --agua: #86c6b7;
  --girasol: #d9b86a; --girasol-palido: #38352a; --rosa: #e3a2b2; --rosa-palida: #3a2c36;
  --sobre-acento: #1c2230;
  --campo-verano: #3a2f36; --int-verano: #302a33;
  --campo-primavera: #2d3429; --int-primavera: #282e27;
  --campo-invierno: #22393a; --int-invierno: #1f3032;
  --banda: #141923; --banda-texto: #bdb5a6; --banda-titulo: #ece3d1; --banda-oro: #c2a06a; --banda-linea: rgba(194,160,106,.25);
  --sombra: rgba(0,0,0,.45); --velo: rgba(10,13,20,.7); --cabecera: rgba(28,34,48,.94); --fila-par: rgba(255,255,255,.035);
  --filtro-lamina: brightness(.86) saturate(.9); --foto: #e8e3d9; --filtro-foto: brightness(.92);
  --pista: #2f3748; --perilla: #e4dccb; --perilla-ico: #1c2230;
  --friso: url("../img/friso-noche.svg");
  --ver-sol: none; --ver-luna: inline;
}
/* ---------- 4. Clases de color para las ilustraciones ----------
   comun/js/arte.js dibuja los SVG con estas clases, así cambian solos
   con el modo día/noche. --tema y --tema-campo los fija cada modelo. */
.f-agua { fill: var(--agua); } .f-amapola { fill: var(--amapola); } .f-cerezo { fill: var(--cerezo); }
.f-ciruela { fill: var(--ciruela); } .f-contorno { fill: var(--contorno); } .f-coral { fill: var(--coral); }
.f-cuerpo { fill: var(--cuerpo); } .f-lavanda { fill: var(--lavanda); } .f-marfil { fill: var(--marfil); }
.f-melocoton { fill: var(--melocoton); } .f-olivo { fill: var(--olivo); } .f-oro { fill: var(--oro); }
.f-oro-claro { fill: var(--oro-claro); } .f-oro-palido { fill: var(--oro-palido); } .f-papel { fill: var(--papel); }
.f-salvia { fill: var(--salvia); } .f-tema { fill: var(--tema); } .f-tema-campo { fill: var(--tema-campo); }
.s-contorno { stroke: var(--contorno); } .s-oro { stroke: var(--oro); } .s-oro-claro { stroke: var(--oro-claro); }
.s-oro-palido { stroke: var(--oro-palido); } .s-olivo { stroke: var(--olivo); }
/* Sol o luna (centro del filete): se alternan con variables, que sí llegan dentro de <use> */
.astro-sol { display: var(--ver-sol); } .astro-luna { display: var(--ver-luna); }

/* ---------- 5. Variante nocturna «La Luna y las Estrellas» (Mucha, 1902) ----------
   Se aplica si la página lo pide con <html data-noche="estrellas">: desde la Beta 1.5,
   el pomodoro y la tienda (identidad común). Azul más profundo, friso con guirnalda de
   estrellas, cielo estrellado de fondo y un brillo suave para los halos. */
:root[data-tema="noche"][data-noche="estrellas"] {
  --papel: #131a2c; --marfil: #1b2338; --blanco: #222b42; --oro-palido: #2b3450;
  --cabecera: rgba(19,26,44,.94); --sombra: rgba(0,0,0,.55);
  --int-verano: #2a2534; --int-primavera: #222a2a; --int-invierno: #1a2b33;
  --friso: url("../img/friso-estrellas.svg");
  --fondo-pagina: url("../img/estrellas.svg"), url("../img/grano.svg");
  --fondo-tamano: 260px, 220px;
  --brillo-noche: rgba(228,201,138,.16); --brillo-noche-suave: rgba(228,201,138,.07);
}