:root{
  /* Palette pastello (token) */
  --mint-50:#E6F5F2;   --mint-300:#A8DED6;
  --aqua-50:#E7F7FB;   --aqua-300:#A7DFF1;
  --blue-50:#E9F1FF;   --blue-300:#B7CDF7;
  --lavender-50:#F1EEFF; --lavender-300:#D2C9FF;
  --peach-50:#FFF0EA;  --peach-300:#F8C9B6;
  --sand-50:#FAF6F0;   --sand-300:#E6DACB;

  /* Neutri UI */
  --ink-700:#2C2C2C; /* testi strumentali su neutro */
  --ink-400:#6E6E6E; /* didascalie */
  --white:#FFFFFF;

  /* Spaziatura scala 8pt (px) */
  --space-4:4px; --space-8:8px; --space-12:12px; --space-16:16px;
  --space-24:24px; --space-32:32px; --space-48:48px; --space-64:64px;

  /* Raggi */
  --radius-xs:12px; --radius-sm:14px; --radius-md:16px; --radius-lg:18px; --radius-pill:999px;

  /* Durate & curve */
  --dur-fast:140ms;        /* micro */
  --dur:240ms;             /* aperture */
  --dur-slow:600ms;        /* transizioni colore/bg */
  --breath-step:4s;        /* inhale/hold/exhale */
  --ease: ease;
  --ease-io: ease-in-out;

  /* Tipografia */
  --h1-size: clamp(28px, 3vw, 32px);
  --h1-lh: 1.25; --h1-w: 350; --h1-tracking: 0.025em;
  --h2-size: clamp(20px, 2.2vw, 22px); --h2-lh:1.35; --h2-w:350; --h2-tracking:0.02em;
  --body-size:16px; --body-lh:1.5; --body-w:350; --body-tracking:0.01em;
  --caption-size:13.5px; --caption-lh:1.4;

  /* Stato dinamico background (gestito da JS) */
  --bg-from: var(--mint-300);
  --bg-to: var(--aqua-50);
  --bg-angle: 135deg;

  /* Colori derivati per testi e ring */
  --text: #1d1d1d; /* verrà regolato su contrasto via JS ove necessario */
  --muted: var(--ink-400);
  --ring: color-mix(in srgb, #000 35%, transparent);

  /* Top-progress */
  --progress-h: 2px;
}

*{box-sizing:border-box}
html,body{height:100%}

body{
  margin:0;
  font-family: 'Inter', 'Manrope', 'Outfit', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  font-size: var(--body-size);
  line-height: var(--body-lh);
  font-weight: var(--body-w);
  letter-spacing: var(--body-tracking);
  color: var(--text);
  background: none; /* gestito da #bg per crossfade */
  transition: color var(--dur) var(--ease);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}

.visually-hidden{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap;border:0;padding:0;margin:-1px}

/* Background crossfade layers */
#bg{ position: fixed; inset:0; z-index:-1; }
.bg-layer{ position:absolute; inset:0; opacity:0; transition: opacity var(--dur-slow) var(--ease-io); background: linear-gradient(var(--bg-angle), var(--bg-from), var(--bg-to)); will-change: opacity; }
.bg-layer.active{ opacity:1; }

/* Top bar */
.app-header{
  height: 60px; display:flex; align-items:center; justify-content:space-between;
  padding: 0 var(--space-24);
  background: color-mix(in srgb, var(--bg-from) 8%, transparent);
  backdrop-filter: none; /* niente glass */
  position: relative; z-index: 2; /* sopra breath-circle e pulse */
}
.brand{
  font-size: var(--h2-size); line-height: var(--h2-lh); font-weight: var(--h2-w);
  letter-spacing: var(--h2-tracking);
  text-transform: none; /* niente all caps */
  color: inherit; text-decoration: none;
}
.brand:hover{ opacity:.92; }
.header-right{ display:flex; align-items:center; gap: var(--space-16); }
.timer{
  min-width: 64px; text-align:right; font-variant-numeric: tabular-nums; opacity:.8;
}

/* Layout canvas full-viewport */
.app{
  height: calc(100vh - 60px); /* evita scroll, tutto above the fold */
  display:grid; place-items:center;
  padding: var(--space-32) max(10%, var(--space-24));
  position: relative; z-index: 1; /* sopra il bg crossfade */
  overflow:hidden;
}

/* Viste: no cornici, solo centralità e respiro */
.view{ opacity:0; transform: translateY(6px); transition: opacity var(--dur), transform var(--dur); pointer-events:none; text-align:center; max-width: 920px; width:100%; display:grid; place-items:center; z-index: 1; }
.view.active{ opacity:1; transform: translateY(0); pointer-events:auto; }

.lead{
  margin: 0 0 var(--space-24);
  font-size: var(--h2-size); line-height: var(--h2-lh); font-weight: var(--h2-w);
  letter-spacing: var(--h2-tracking);
  opacity:.92;
}

/* Pulsanti ghost/tonal */
button{ appearance:none; border:none; cursor:pointer; border-radius: var(--radius-md); padding: 12px 16px; font-weight: 400; transition: opacity var(--dur-fast) var(--ease), filter var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease); }
button:focus-visible{ outline: none; box-shadow: 0 0 0 2px color-mix(in srgb, #000 38%, transparent); border-radius: var(--radius-md); }
button.tonal{ background-color: color-mix(in srgb, var(--bg-from) 12%, transparent); color: var(--ink-700); }
button.tonal:hover{ filter: brightness(1.06); }
button.ghost{ background-color: transparent; color: var(--ink-700); }
button.ghost:hover{ opacity:.94; }
button:active{ opacity:.92; transform: scale(0.98); transition-duration: 120ms; }

/* Pill/Chip di selezione */
.chips{ display:flex; gap: var(--space-12); justify-content:center; align-items:center; flex-wrap: wrap; margin-top: var(--space-24); }
.chip{ border-radius: var(--radius-pill); padding: 10px 14px; background-color: color-mix(in srgb, var(--bg-from) 8%, transparent); color: var(--ink-700); transition: background-color var(--dur) var(--ease); cursor:pointer; }
.chip[aria-pressed="true"], .chip.active{ background-color: color-mix(in srgb, var(--bg-from) 16%, transparent); }
.chip:focus-visible{ outline: none; box-shadow: 0 0 0 2px color-mix(in srgb, #000 35%, transparent); }
.chip:hover{ filter: brightness(1.06); }

/* Switch lingua minimal */
.lang-switch{ display:flex; align-items:center; gap: 10px; }
.lang-toggle{ position: relative; width: 72px; height: 36px; border-radius: var(--radius-pill); transition: background var(--dur) var(--ease); background: color-mix(in srgb, #000 12%, var(--bg-from) 28%); backdrop-filter: blur(4px); }
.lang-toggle .thumb{ position:absolute; top: 4px; left: 4px; width: 28px; height:28px; border-radius: var(--radius-pill); background: color-mix(in srgb, #fff 88%, var(--bg-from) 6%); box-shadow: inset 0 0 0 1px color-mix(in srgb, #000 8%, transparent); transition: transform var(--dur) var(--ease); }
.lang-toggle[data-state="it"] .thumb{ transform: translateX(36px); }
.lang-label{ font-size: var(--caption-size); opacity:.7 }

/* Phases (inspira/hold/espira) */
.phases{ display:grid; grid-auto-flow: column; justify-content:center; gap: var(--space-32); margin-top: var(--space-24); align-items: end; }
.phase{ display:grid; grid-template-rows: auto auto auto; justify-items:center; gap: var(--space-8); min-width: 72px; position: relative; }
.phase .icon{ opacity:.7; }
.phase-cap{ font-size: 14px; opacity:.85; text-transform:none; letter-spacing:0.02em }
.phase-time{ font-variant-numeric: tabular-nums; font-size: 14px; opacity:.7 }
.phase.active .icon{ opacity:1; filter: contrast(1.08); }
.phase.active .phase-cap{ opacity:1 }
.phase.active .phase-time{ opacity:.9 }
.phase .progress-ring{ position:absolute; top: -2px; left: 50%; transform: translateX(-50%); width: 36px; height: 36px; pointer-events:none; }
.phase .progress-ring circle{ fill:none; stroke: currentColor; stroke-width: 2; opacity:.25; }
.phase .progress-ring circle.fill{ opacity:.9; stroke-dasharray: 113; stroke-dashoffset: 113; transition: stroke-dashoffset var(--breath-step) linear; }

/* Quote area */
.quote-wrap{ display:grid; gap: var(--space-12); margin: 0 auto; }
.quote{ margin:0; font-size: clamp(18px, 3vw, 24px); line-height:1.35; font-weight: 400; letter-spacing: 0.02em; transition: color var(--dur); }
.quote-meta{ font-size: 14px; color: var(--muted); transition: color var(--dur); }
.guidance{ margin-top: var(--space-16); font-size: 15px; opacity:.85; }

/* Pulse overlay respirazione */
#pulse{ position: fixed; inset:0; z-index:0; pointer-events:none; opacity:0; background: #000; mix-blend-mode: luminosity; display:none; }
body[data-state="session"] #pulse{ display:block; } /* visibile solo in sessione */
@keyframes calmPulse{ 0%{opacity:0} 50%{opacity:0.08} 100%{opacity:0} }
body[data-state="session"] #pulse{ animation: calmPulse 5s var(--ease-io) infinite; }
@media (prefers-reduced-motion: reduce){ body[data-state="session"] #pulse{ animation: none; } }

/* Indicatore visivo respiro: cerchio sobrio senza ombre */
.breath-visual{ position: fixed; inset:0; display:none; place-items:center; z-index:0; pointer-events:none; }
body[data-state="session"] .breath-visual{ display:grid; }
.breath-circle{
  width: min(82vmin, 960px); height: min(82vmin, 960px); border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%,
      color-mix(in srgb, var(--bg-from) 68%, transparent) 0%,
      color-mix(in srgb, var(--bg-from) 44%, transparent) 44%,
      color-mix(in srgb, var(--bg-from) 18%, transparent) 68%,
      transparent 86%);
  filter: blur(1.5px); /* ammorbidisce lo stacco esterno */
  transform: scale(0.94);
}
@keyframes breathCircle{ 0%{transform:scale(0.94)} 33.333%{transform:scale(1.06)} 66.666%{transform:scale(1.06)} 100%{transform:scale(0.94)} }
body[data-state="session"] .breath-circle{ animation: breathCircle 12s var(--ease-io) infinite; }

/* Progresso top sottilissimo */
#progress{ position:fixed; top:0; left:0; right:0; height:var(--progress-h); background:transparent; pointer-events:none; }
#progress-bar{ height:100%; width:0%; background: color-mix(in srgb, var(--ink-700) 28%, transparent); transition: width 60s linear, background var(--dur); mix-blend-mode: multiply; opacity:.7 }

/* Iconografia outline (monolinea, 1.5–2px) */
.icon{ width: 32px; height: 32px; stroke: currentColor; stroke-width: 1.75; fill: none; }

/* Griglia icone (4–6 colonne) */
.icon-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); gap: 24px 24px; row-gap: 28px; justify-items:center; align-items:center; }
.tile{ width: 78px; height: 78px; border-radius: var(--radius-lg); display:grid; place-items:center; background: color-mix(in srgb, var(--bg-from) 10%, transparent); transition: filter var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease); }
.tile:hover{ filter: contrast(1.06); }
.tile[aria-pressed="true"], .tile.active{ background: color-mix(in srgb, var(--bg-from) 18%, transparent); }

/* Slider minimal */
input[type="range"]{ -webkit-appearance:none; appearance:none; background:transparent; width:100%; height: 36px; }
input[type="range"]::-webkit-slider-runnable-track{ height:2px; background: color-mix(in srgb, var(--ink-700) 16%, transparent); border-radius: 1px; }
input[type="range"]::-moz-range-track{ height:2px; background: color-mix(in srgb, var(--ink-700) 16%, transparent); border-radius: 1px; }
input[type="range"]::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; width:14px; height:14px; border-radius: 50%; background: var(--ink-700); margin-top:-6px; }
input[type="range"]::-moz-range-thumb{ width:14px; height:14px; border-radius: 50%; background: var(--ink-700); border:none; }
input[type="range"]:focus-visible{ outline:none; box-shadow: 0 0 0 2px var(--ring); border-radius: var(--radius-xs); }

/* Mapping per classi legacy (.primary/.secondary) */
button.primary{ background-color: color-mix(in srgb, #000 10%, var(--bg-from) 28%); color: var(--white); }
button.primary:hover{ filter: brightness(1.06); }
button.secondary{ background-color: color-mix(in srgb, #000 6%, var(--bg-from) 14%); color: var(--ink-700); }
button.secondary:hover{ opacity:.94; }

/* Donate link minimal */
.donate{ position:fixed; right: 16px; bottom: 16px; padding: 10px 12px; font-size: 14px; border-radius: var(--radius-pill); background: color-mix(in srgb, #000 6%, var(--bg-from) 18%); color: var(--ink-700); text-decoration:none; }
.donate:hover{ filter: brightness(1.06); }

/* Accessibilità & motion */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}