/* ============================================================
   PretLegno — proposte grafiche
   temi.css : palette colori + abbinamenti tipografici
   Selezionabili dal pannello; valgono per tutte e 3 le versioni.
   ============================================================ */

/* ---------------- PALETTE ---------------- */

/* 1 · Crema e caramello — chiara, calda, legno naturale
      (valori esatti del mockup v1 del 29/07) */
html[data-pal="1"] {
  color-scheme: light;
  --bg: #f6f1e7;
  --bg-alt: #efe7d8;
  --surface: #fdfbf7;
  --ink: #241a12;
  --ink-soft: #4a3a2b;
  --line: #ddd2bf;
  --accent: #b0713a;
  --accent-ink: #8a5527;
  --accent-soft: #ecc89a;
  --on-accent: #ffffff;
  --motto: #7a4a24;
  --band-bg: #241a12;
  --band-ink: #efe4d2;
  --foot-bg: #1c130b;
  --foot-ink: #cbbba6;
  --hero-veil: linear-gradient(180deg, rgba(24,17,11,.16) 0%, rgba(24,17,11,.32) 45%, rgba(24,17,11,.76) 100%);
}

/* 2 · Noce scuro e ottone — scura, calda, showroom */
html[data-pal="2"] {
  color-scheme: dark;
  --bg: #1b1512;
  --bg-alt: #241c17;
  --surface: #241c17;
  --ink: #efe3d2;
  --ink-soft: #b0a08c;
  --line: rgba(239,227,210,.16);
  --accent: #c08a3e;
  --accent-ink: #d9a75c;
  --accent-soft: #e3bd7e;
  --on-accent: #1b1512;
  --motto: #e3bd7e;
  --band-bg: #241c17;
  --band-ink: #efe3d2;
  --foot-bg: #120d0a;
  --foot-ink: #e6d9c6;
  --hero-veil: linear-gradient(180deg, rgba(12,8,6,.28) 0%, rgba(12,8,6,.45) 45%, rgba(12,8,6,.86) 100%);
}

/* 3 · Pietra e bosco — chiara, fredda, contemporanea */
html[data-pal="3"] {
  color-scheme: light;
  --bg: #f6f5f2;
  --bg-alt: #eceae4;
  --surface: #ffffff;
  --ink: #22251f;
  --ink-soft: #62685c;
  --line: rgba(34,37,31,.14);
  --accent: #4b6249;
  --accent-ink: #3d5340;
  --accent-soft: #8aa285;
  --on-accent: #f7f9f5;
  --motto: #3d5340;
  --band-bg: #22251f;
  --band-ink: #e7e9e3;
  --foot-bg: #22251f;
  --foot-ink: #e7e9e3;
  --hero-veil: linear-gradient(180deg, rgba(18,20,17,.14) 0%, rgba(18,20,17,.3) 45%, rgba(18,20,17,.72) 100%);
}

/* 4 · Larice e ruggine — chiara, materica, artigiana */
html[data-pal="4"] {
  color-scheme: light;
  --bg: #f7f3ee;
  --bg-alt: #ece2d6;
  --surface: #fffcf7;
  --ink: #2d2622;
  --ink-soft: #6f6157;
  --line: rgba(45,38,34,.15);
  --accent: #a5442a;
  --accent-ink: #8d3722;
  --accent-soft: #cf8062;
  --on-accent: #fdf6f1;
  --motto: #8d3722;
  --band-bg: #2d2622;
  --band-ink: #f0e6da;
  --foot-bg: #2d2622;
  --foot-ink: #f0e6da;
  --hero-veil: linear-gradient(180deg, rgba(26,19,15,.16) 0%, rgba(26,19,15,.34) 45%, rgba(26,19,15,.78) 100%);
}

/* 5 · Notte e panna — scura, fredda, minimale */
html[data-pal="5"] {
  color-scheme: dark;
  --bg: #16181a;
  --bg-alt: #1e2124;
  --surface: #1e2124;
  --ink: #ecebe7;
  --ink-soft: #a2a5a3;
  --line: rgba(236,235,231,.16);
  --accent: #b9a37c;
  --accent-ink: #cbb894;
  --accent-soft: #d8caae;
  --on-accent: #16181a;
  --motto: #cbb894;
  --band-bg: #1e2124;
  --band-ink: #ecebe7;
  --foot-bg: #0f1113;
  --foot-ink: #e4e3df;
  --hero-veil: linear-gradient(180deg, rgba(8,9,10,.3) 0%, rgba(8,9,10,.48) 45%, rgba(8,9,10,.88) 100%);
}

/* ---------------- ABBINAMENTI TIPOGRAFICI ---------------- */

/* 1 · Fraunces + Inter — calda e artigianale */
html[data-font="1"] {
  --display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --text: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --display-w: 500;
  --display-ls: -0.012em;
}

/* 2 · Playfair Display + Work Sans — classica ed elegante */
html[data-font="2"] {
  --display: 'Playfair Display', Georgia, serif;
  --text: 'Work Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --display-w: 500;
  --display-ls: -0.005em;
}

/* 3 · Space Grotesk + Inter — contemporanea e tecnica */
html[data-font="3"] {
  --display: 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --text: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --display-w: 500;
  --display-ls: -0.028em;
}

/* 4 · Cormorant Garamond + Lato — sobria e tradizionale */
html[data-font="4"] {
  --display: 'Cormorant Garamond', Georgia, serif;
  --text: 'Lato', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --display-w: 600;
  --display-ls: 0em;
}
/* il Cormorant ha un'asta molto sottile: alza il corpo dei titoli */
html[data-font="4"] h1 { font-size: clamp(2.7rem, 6.4vw, 4.9rem); }
html[data-font="4"] h2 { font-size: clamp(2rem, 4vw, 3.1rem); }
html[data-font="4"] blockquote { font-size: clamp(1.6rem, 3.4vw, 2.6rem); }