/* ================================================================
   Pasticceria Canalicchio — design tokens (3 directions)
   ================================================================ */

:root {
  /* base */
  --max-w: 1400px;

  /* DIRECTION A · EDITORIALE (default) ------------------- */
  --bg:        #f5efe1;   /* burro */
  --bg-2:      #ebe2cd;   /* burro scuro */
  --paper:     #fdfaf3;
  --ink:       #1a140b;
  --ink-2:     #382a18;
  --ink-3:     #6b5b46;
  --ink-4:     #a89a82;
  --rule:      rgba(26,20,11,0.10);
  --accent:    #b35f2a;   /* rame */
  --accent-2:  #8a3a17;
  --brass:     #a48542;
  --olive:     #56603a;

  --serif:     'Newsreader', 'GT Sectra', Georgia, serif;
  --sans:      'Geist', 'Söhne', system-ui, sans-serif;
  --mono:      'JetBrains Mono', ui-monospace, monospace;

  --rad-sm: 14px;
  --rad-md: 20px;
  --rad-lg: 28px;
  --rad-xl: 36px;

  --shadow-soft: 0 1px 0 rgba(26,20,11,.02), 0 18px 50px -32px rgba(26,20,11,.22);
  --shadow-up:   0 1px 0 rgba(26,20,11,.03), 0 28px 70px -28px rgba(26,20,11,.28);

  /* DIRECTION B · VETRINA --------------------------------- */
  --b-bg:      #f1ede4;
  --b-paper:   #ffffff;
  --b-ink:     #14140f;
  --b-ink-3:   #6e6c63;
  --b-rule:    rgba(20,20,15,0.10);
  --b-accent:  #5e7252;   /* sage */
  --b-accent-2:#3a4633;
  --b-cream:   #f8f5ec;

  /* DIRECTION C · FRUTTA --------------------------------- */
  --c-bg:      #efe6d3;
  --c-paper:   #f8f1de;
  --c-ink:     #0f0c08;
  --c-ink-3:   #5b4a30;
  --c-rule:    rgba(15,12,8,.12);
  /* per-fruit accents */
  --c-mela:    #b8c44a;
  --c-lampone: #c93a52;
  --c-mango:   #e08a1c;
  --c-mirtillo:#3a4a8a;
  --c-arancia: #e25a1f;
  --c-arachide:#a86a3a;
}

/* ================ utilities shared across pages =============== */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-feature-settings: 'ss01', 'cv11';
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
.serif { font-family: var(--serif); font-optical-sizing: auto; }
.mono  { font-family: var(--mono); }
.tnum  { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum'; }
.eyebrow {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--ink-3);
  font-weight: 500;
}
.eyebrow .tick { display: inline-block; width: 24px; height: 1px; background: currentColor; margin-right: 12px; vertical-align: middle; }

.hr { height: 1px; background: var(--rule); border: 0; }

.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px;
  border-radius: 999px;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
  transition: transform .25s ease, background .25s ease, color .25s ease, border-color .25s ease;
  cursor: pointer;
}
.btn-ink   { background: var(--ink); color: var(--bg); }
.btn-ink:hover   { background: var(--accent); }
.btn-paper { background: var(--paper); color: var(--ink); }
.btn-ghost { background: transparent; border-color: var(--rule); color: var(--ink); }
.btn-ghost:hover { border-color: var(--ink); }
.btn-sm    { padding: 10px 16px; font-size: 13px; }

.tile {
  position: relative;
  border-radius: var(--rad-lg);
  overflow: hidden;
  background: var(--paper);
  border: 1px solid var(--rule);
  box-shadow: var(--shadow-soft);
}

/* grain */
.grain { position: relative; }
.grain::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.06 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  mix-blend-mode: multiply; opacity: .6;
}

/* reveal on scroll */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }

/* arrow link */
.arrow { display: inline-flex; align-items: center; gap: 10px; transition: gap .3s ease; }
.arrow:hover { gap: 16px; }

/* underline grow */
.ul-grow { background-image: linear-gradient(currentColor, currentColor); background-size: 0 1px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size .35s ease; }
.ul-grow:hover { background-size: 100% 1px; }

/* live dot */
@keyframes livepulse { 0%,100% { box-shadow: 0 0 0 0 rgba(58,134,64,.55);} 50%{ box-shadow:0 0 0 6px rgba(58,134,64,0);} }
.live-dot { width: 7px; height: 7px; border-radius: 999px; background: #6a8e3f; display: inline-block; animation: livepulse 2.4s ease-in-out infinite; }

/* marquee */
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee { display: flex; width: max-content; animation: marquee 60s linear infinite; }
.marquee.fast { animation-duration: 32s; }

/* monogram */
.monogram {
  width: 36px; height: 36px; border-radius: 999px;
  background: var(--ink); color: var(--bg);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: 16px;
}

/* dotted bg */
.dots { background-image: radial-gradient(rgba(26,20,11,.16) 1px, transparent 1px); background-size: 14px 14px; }