/* Generato da tge-refactor@c3f399a (src/styles/tokens.css + src/styles/guide-bridge.css) con scripts/export-guide-theme.mjs.
   Non modificare qui: si corregge in tge-refactor e si esporta di nuovo. */

/* ============================================================
   The Grand Escape — Design tokens (brandbook-aligned)
   ============================================================ */

:root {
  /* Brand colors (brandbook) */
  --red-wine:    #A32C29;  /* Brown Red — primary brand / titles */
  --fern:        #637D42;  /* Fern — accents / kickers (brandbook) */
  --fern-ink:    #4F6634;  /* Fern darkened for small text on paper (5.4:1) */
  --graphite:    #262626;  /* Grafite — reserved for footer captions only */
  --caramel:     #FABF80;  /* Light Caramel — Germany sub-brand */
  --navy:        #1D3B5F;  /* Regal Navy — subtitles */
  --cream:       #F5F7F5;  /* Cloud White — reserved */

  /* Warm earth tones (texture + dark sections) */
  --espresso:    #2C1F15;  /* warm ink — body text & dark sections.
                              Deliberately warmer than brandbook graphite. */
  --walnut:      #3A2A1D;
  --coffee:      #6B4423;
  --wheat:       #C9A27A;

  /* Organic paper */
  --paper-1:     #F3ECE0;  /* base ivory */
  --paper-2:     #EDE4D2;  /* warmer */
  --paper-3:     #E8DCC4;  /* tan ivory */

  /* Sub-brand per-event */
  --slovenia:    var(--fern);
  --germany:     var(--caramel);
  --tuscany:     var(--red-wine);

  /* Typography (brandbook) */
  --font-display: 'DM Sans', system-ui, -apple-system, 'Helvetica Neue', sans-serif;
  --font-sans:    'DM Sans', system-ui, -apple-system, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;
  --font-extra-slovenia: 'Questrial', var(--font-sans);
  --font-extra-germany:  'Germania One', var(--font-sans);
  --font-extra-tuscany:  'Cormorant Garamond', 'DM Serif Display', Georgia, serif;

  /* Fluid type scale */
  --fs-xs:   clamp(11px, 0.4vw + 10px, 12px);
  --fs-sm:   clamp(13px, 0.4vw + 12px, 14px);
  --fs-base: clamp(15px, 0.5vw + 13px, 16px);
  --fs-md:   clamp(17px, 0.4vw + 16px, 18px);   /* prose paragraphs (brandbook body ≈17px) */
  --fs-lg:   clamp(19px, 1vw + 16px, 22px);
  --fs-xl:   clamp(24px, 1.6vw + 18px, 30px);
  --fs-2xl:  clamp(32px, 2.4vw + 20px, 48px);
  --fs-3xl:  clamp(40px, 3.5vw + 22px, 68px);
  --fs-4xl:  clamp(52px, 5vw + 24px, 96px);
  --fs-5xl:  clamp(68px, 7vw + 28px, 128px);

  /* Spacing */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;

  --container: 1200px;
  --container-narrow: 720px;

  /* Motion */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ============================================================
   Base reset
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;
  width: 100%;
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--espresso);
  background-color: var(--paper-1);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
  width: 100%;
  max-width: 100vw;
  position: relative;
}

main, section, article { max-width: 100%; }
img, video, svg { max-width: 100%; height: auto; }

/* Organic paper texture — fixed layers behind content */
body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
}

/* Layer 1: radial warm gradients + fiber noise */
body::before {
  background:
    radial-gradient(1200px 800px at 20% 10%, var(--paper-2) 0%, transparent 60%),
    radial-gradient(900px 600px at 90% 80%, var(--paper-3) 0%, transparent 55%);
}

/* Per-event tinted paper — applied on <body data-event="slovenia|germany|tuscany"> */
body[data-event]::before {
  background:
    radial-gradient(1200px 800px at 20% 10%,
      color-mix(in oklab, var(--accent) var(--tint-a, 24%), var(--paper-2)) 0%,
      transparent 60%),
    radial-gradient(900px 600px at 90% 80%,
      color-mix(in oklab, var(--accent) var(--tint-b, 16%), var(--paper-3)) 0%,
      transparent 55%),
    radial-gradient(700px 500px at 50% 110%,
      color-mix(in oklab, var(--accent) var(--tint-c, 10%), var(--paper-1)) 0%,
      transparent 60%);
}

/* Per-event tint intensity curve (accent-intensity approved per-event).
   Germany can push harder (caramel is light).
   Tuscany is lighter (wine is dark — 20% would go pink).
   Slovenia sits in the middle. */
body[data-event="slovenia"] { --accent: var(--fern);     --tint-a: 22%; --tint-b: 14%; --tint-c:  8%; }
body[data-event="germany"]  { --accent: var(--caramel);  --tint-a: 32%; --tint-b: 22%; --tint-c: 14%; }
body[data-event="tuscany"]  { --accent: var(--red-wine); --tint-a: 12%; --tint-b:  8%; --tint-c:  5%; }

/* Accent as *text*, split by background so every pairing clears WCAG AA:
   --accent          fills, borders, decorative (the brand color as-is)
   --accent-ink      accent-colored text on paper backgrounds
   --accent-on-dark  accent-colored text on espresso / photo backgrounds
   --accent-contrast text sitting on an --accent fill */
:root {
  --accent-ink:      var(--fern-ink);
  --accent-on-dark:  var(--caramel);
  --accent-contrast: #fff;
}
body[data-event="slovenia"] { --accent-ink: #4F6634; --accent-on-dark: #A9C27D; --accent-contrast: #fff; }
body[data-event="germany"]  { --accent-ink: #8F5A1C; --accent-on-dark: var(--caramel); --accent-contrast: var(--espresso); }
body[data-event="tuscany"]  { --accent-ink: var(--red-wine); --accent-on-dark: #E38A86; --accent-contrast: #fff; }

/* Layer 2: impurity flecks + fiber grain (tiled SVG) */
body::after {
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='600' height='600'><g fill='%238B5E3C' opacity='0.55'><circle cx='42' cy='78' r='1.4'/><circle cx='120' cy='34' r='0.9'/><circle cx='188' cy='102' r='1.7'/><circle cx='258' cy='44' r='0.7'/><circle cx='332' cy='92' r='1.3'/><circle cx='412' cy='58' r='1.1'/><circle cx='488' cy='120' r='1.6'/><circle cx='552' cy='64' r='0.9'/><circle cx='82' cy='188' r='1.2'/><circle cx='164' cy='222' r='0.8'/><circle cx='244' cy='176' r='1.5'/><circle cx='320' cy='248' r='1.0'/><circle cx='404' cy='192' r='0.7'/><circle cx='478' cy='258' r='1.4'/><circle cx='568' cy='210' r='1.0'/><circle cx='34' cy='318' r='1.6'/><circle cx='128' cy='362' r='0.8'/><circle cx='212' cy='304' r='1.2'/><circle cx='296' cy='354' r='0.9'/><circle cx='388' cy='322' r='1.7'/><circle cx='462' cy='388' r='1.0'/><circle cx='548' cy='346' r='1.3'/><circle cx='66' cy='452' r='0.9'/><circle cx='152' cy='498' r='1.5'/><circle cx='236' cy='432' r='1.1'/><circle cx='324' cy='478' r='0.7'/><circle cx='408' cy='442' r='1.4'/><circle cx='496' cy='516' r='1.0'/><circle cx='580' cy='468' r='0.8'/></g><g fill='%236B4423' opacity='0.45'><ellipse cx='94' cy='142' rx='2.8' ry='1.1' transform='rotate(22 94 142)'/><ellipse cx='278' cy='212' rx='3.4' ry='1.3' transform='rotate(-38 278 212)'/><ellipse cx='442' cy='138' rx='2.2' ry='0.9' transform='rotate(66 442 138)'/><ellipse cx='118' cy='386' rx='3.1' ry='1.2' transform='rotate(14 118 386)'/><ellipse cx='354' cy='412' rx='2.6' ry='1.0' transform='rotate(-52 354 412)'/><ellipse cx='522' cy='282' rx='3.6' ry='1.4' transform='rotate(80 522 282)'/><ellipse cx='208' cy='552' rx='2.4' ry='1.0' transform='rotate(-24 208 552)'/><ellipse cx='448' cy='564' rx='3.0' ry='1.2' transform='rotate(44 448 564)'/></g><g fill='%23A67244' opacity='0.42'><circle cx='22' cy='240' r='0.6'/><circle cx='176' cy='72' r='0.5'/><circle cx='356' cy='18' r='0.7'/><circle cx='532' cy='42' r='0.6'/><circle cx='64' cy='522' r='0.5'/><circle cx='266' cy='586' r='0.7'/><circle cx='512' cy='580' r='0.6'/></g></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='3'/><feColorMatrix values='0 0 0 0 0.35  0 0 0 0 0.25  0 0 0 0 0.15  0 0 0 0.14 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 600px 600px, 220px 220px;
  background-repeat: repeat, repeat;
  mix-blend-mode: multiply;
  opacity: 0.85;
}

@media (max-width: 480px) {
  body::after { opacity: 0.55; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Typography — brandbook: DM Sans Bold for headers, Inter for body */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 0.95;
  text-wrap: balance;
  letter-spacing: -0.015em;
  color: var(--red-wine);
  text-transform: uppercase;
}

/* Opt-in title color classes — override the default wine where needed */
.t-brand  { color: var(--red-wine); }
.t-accent { color: var(--accent-ink, var(--red-wine)); }

a { color: inherit; text-decoration: none; }
img, video, svg { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }

/* Utilities */
.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--sp-5); position: relative; }
.container-narrow { max-width: var(--container-narrow); margin: 0 auto; padding: 0 var(--sp-5); position: relative; }

.display {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.015em;
}

.font-germania { font-family: var(--font-extra-germany); font-weight: 400; letter-spacing: 0.01em; }
.font-questrial { font-family: var(--font-extra-slovenia); font-weight: 400; letter-spacing: 0; }

.kicker {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--fern-ink);
}

.cta-pill {
  display: inline-flex; align-items: center; gap: 0.4em;
  padding: 0.85em 1.4em;
  font-family: var(--font-display); font-size: var(--fs-sm); font-weight: 800;
  letter-spacing: 0.14em; text-transform: uppercase;
  border-radius: 999px; transition: transform 160ms var(--ease-out), filter 160ms;
}
.cta-pill:hover { transform: translateY(-1px); filter: brightness(1.08); }
.cta-pill:focus-visible {
  outline: 2px solid var(--fern);
  outline-offset: 3px;
}

.cta-primary { background: var(--red-wine); color: #fff; }
.cta-on-dark { background: var(--paper-1); color: var(--espresso); }
.cta-outline { border: 1px solid currentColor; }

/* Reveal (only when JS is active) */
.js .sr { opacity: 0; transform: translateY(20px); transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out); }
.js .sr.visible { opacity: 1; transform: translateY(0); }
.js .sr.d1 { transition-delay: 120ms; }
.js .sr.d2 { transition-delay: 240ms; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* Drop-cap on MDX philosophy paragraph — font switches per event via --dropcap-font */
.philosophy-dropcap p:first-of-type::first-letter,
.mdx-copy p:first-of-type::first-letter {
  font-family: var(--dropcap-font, var(--font-extra-tuscany));
  font-weight: 500;
  float: left;
  font-size: clamp(68px, 7vw + 20px, 120px);
  line-height: 0.85;
  padding: 6px 12px 0 0;
  color: var(--accent, var(--red-wine));
}

body[data-event="slovenia"] { --dropcap-font: var(--font-extra-slovenia); }
body[data-event="germany"]  { --dropcap-font: var(--font-extra-germany); }
body[data-event="tuscany"]  { --dropcap-font: var(--font-extra-tuscany); }

/* ============================================================
   The Grand Escape — ponte verso il lettore delle guide
   Il sito NON importa questo file: non cambia niente delle sue pagine.

   Lo accoda scripts/export-guide-theme.mjs al tokens.css esportato. Serve
   perché la cornice del lettore di bas-guides (reader-html.css) e il
   vocabolario della guida sono nati sul tema del Tuscany Trail, e usano i suoi
   nomi di token: --wine, --cream, --ink, --fs-h2, --maxw-text… Qui quei nomi
   ricevono i valori TGE, così lo stesso markup e la stessa cornice vestono i
   colori e i caratteri di The Grand Escape.

   Contrasti (WCAG AA, testo normale ≥ 4,5:1), misurati su --paper-1 #F3ECE0:
     --ink (espresso) ...................... 13,6:1
     --wine #A32C29 ........................ 6,1:1  (e crema sul vino, idem)
     --olive (fern-ink #4F6634) ............ 5,5:1
     --muted rgba(44,31,21,.65) ............ 4,7:1  (4,6:1 su --paper)
     --muted-strong rgba(44,31,21,.74) ..... 6,2:1
     --blush #F6D5D0 sul vino .............. 5,2:1
   ============================================================ */

:root {
  /* --- Colori con i nomi del tema tt ---------------------------------- */
  --wine: var(--red-wine);               /* primario: bottoni, marchio, barra di avanzamento */
  --wine-deep: #7E211F;                  /* hover del primario (8,4:1 sulla carta) */
  --wine-tint: rgba(163, 44, 41, 0.07);  /* velo vino: evidenza della ricerca */
  --cream: var(--paper-1);               /* fondo della pagina e testo sui fondi pieni */
  --paper: var(--paper-2);               /* fondo dei riquadri (capitoli chiusi, speciale) */
  --ink: var(--espresso);                /* testo corrente e fondi scuri */
  --ink-warm: var(--walnut);
  --heading: var(--espresso);            /* grassetti e titoli minori */
  --olive: var(--fern-ink);              /* occhielli: il kicker del sito */
  --blush: #F6D5D0;                      /* testo secondario sul vino */
  --apricot: var(--caramel);             /* fascia del cancello */
  --on-apricot: rgba(44, 31, 21, 0.8);   /* testo secondario sul caramello (6,0:1) */
  --muted: rgba(44, 31, 21, 0.65);
  --muted-strong: rgba(44, 31, 21, 0.74);
  --line: rgba(44, 31, 21, 0.14);        /* le righe calde del design system */
  --line-strong: rgba(44, 31, 21, 0.2);
  --line-hard: rgba(44, 31, 21, 0.34);   /* bordi di chip e controlli */
  --line-cream: rgba(243, 236, 224, 0.34);

  /* --- Cornice del lettore -------------------------------------------- *
     reader-html.css legge questi da variabili col valore del tema tt come
     ripiego: senza, la barra resterebbe bianco latte sulla carta avorio, la
     targa della copertina bordeaux TT e il titolo di copertina troppo grande
     per «GERMANY/AUSTRIA» su un telefono da 390 px. */
  --barra-bg: rgba(243, 236, 224, 0.95);     /* carta avorio, come la pagina */
  --spaziato-fg: rgba(243, 236, 224, 0.7);   /* scritta verticale sulla foto */
  --targa-bg: rgba(163, 44, 41, 0.94);       /* vino; .guida .copertina-in usa l'accento */
  --velo-bg: rgba(44, 31, 21, 0.45);         /* espresso dietro il cassetto */
  --copertina-h1: clamp(30px, 5.6vw, 54px);  /* «GERMANY/AUSTRIA» sta nella targa da 320 a 1440 px */

  /* --- Accento d'evento (default: vino, come Tuscany) ----------------- *
     --accent          riempimenti e segni decorativi
     --accent-ink      testo in colore d'accento sulla carta
     --accent-fill     fondo pieno che porta testo (per la Slovenia è più
                       scuro del fern: il crema sul fern è 3,9:1)
     --accent-contrast testo su --accent-fill
     --accent-soft     testo secondario su --accent-fill
     Le classi .ev-slo / .ev-ger / .ev-tus di guide.css le ridefiniscono. */
  --accent: var(--red-wine);
  --accent-ink: var(--red-wine);
  --accent-fill: var(--red-wine);
  --accent-contrast: var(--paper-1);
  --accent-soft: #F6D5D0;
  --accent-on-dark: #E38A86;

  /* --- Caratteri ------------------------------------------------------ */
  /* Le famiglie di fonts.css (file locali) prima di quelle di Google Fonts. */
  --font-display: 'DM Sans Variable', 'DM Sans', system-ui, -apple-system, 'Helvetica Neue', sans-serif;
  --font-body: 'Inter Variable', 'Inter', system-ui, -apple-system, sans-serif;

  --fs-h1: clamp(40px, 11vw, 88px);
  --fs-h2: clamp(30px, 7.4vw, 52px);
  --fs-h3: clamp(22px, 5.4vw, 30px);
  --fs-h4: clamp(18px, 4.6vw, 22px);
  --fs-num: clamp(26px, 8vw, 52px);     /* cifre del countdown */
  --fs-stat: clamp(30px, 7vw, 44px);    /* i numeri grandi */
  --fs-lead: clamp(18px, 4.6vw, 20px);
  --fs-body: 17px;                      /* corpo Inter 17 px, anche sul telefono */
  --fs-sm: 16px;                        /* il tema tt lo usa per testo che si legge: non scende sotto 16 */
  --fs-xs: clamp(13.5px, 3.5vw, 14.5px);
  --fs-kicker: 12px;
  --fs-label: 11px;

  /* --- Spaziature ----------------------------------------------------- */
  --pad-x: clamp(20px, 5vw, 40px);
  --pad-x-wide: clamp(24px, 6vw, 48px);
  --sec-y: clamp(76px, 10vw, 104px);
  --sec-y-sm: clamp(56px, 8vw, 72px);
  --gap-row: clamp(16px, 3.5vw, 24px);
  --maxw-text: var(--container-narrow);  /* 720px, la colonna di lettura del sito */
  --maxw-wide: 1000px;
  --maxw-mosaic: 820px;
  --maxw-form: 640px;
}

/* La carta del sito ha due strati con SVG in linea (data:). Il lettore ha una
   CSP img-src limitata che li scarterebbe comunque: qui carta a tinta piatta. */
body::before,
body::after {
  content: none;
}

body {
  background-color: var(--paper-1);
}

/* tokens.css del sito dà a main, section e article `max-width: 100%`: il
   cancello del lettore, una section a tutta larghezza con margini negativi,
   resterebbe tagliato a destra. */
.guida .cancello {
  max-width: none;
}