/* Vesuvio v4 · shared design tokens. Palette taken from the logo: oven soot, brick red, tricolore green, fire. */
@font-face{font-family:"Fraunces";src:url("fonts/fraunces-latin-soft-normal.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Fraunces";src:url("fonts/fraunces-latin-soft-italic.woff2") format("woff2");font-weight:100 900;font-style:italic;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url("fonts/instrument-sans-latin-standard-normal.woff2") format("woff2");font-weight:400 700;font-stretch:75% 100%;font-style:normal;font-display:swap}

:root{
  --soot:#1d1916;         /* oven interior, primary text */
  --soot-2:#2a2420;
  --brick:#8f1d14;        /* logo red */
  --brick-2:#a8261a;
  --brick-soft:#f7e7e3;
  --fire:#ef7d1a;         /* flame */
  --fire-soft:#fff1e2;
  --basil:#1f7a45;        /* tricolore green */
  --basil-soft:#e5f3ea;
  --flour:#f6f4f1;        /* light surface */
  --stone:#e8e4df;        /* borders */
  --stone-2:#d6d0c8;
  --ash:#6f6862;          /* secondary text */
  --white:#fff;
  --text-soft:#4a423c;
  --ok-text:#14532d;
  --warn-text:#8a4304;
  --shadow-1:0 1px 2px rgba(29,25,22,.06),0 2px 8px rgba(29,25,22,.05);
  --shadow-2:0 2px 6px rgba(29,25,22,.06),0 18px 40px -12px rgba(29,25,22,.22);
  --shadow-3:0 30px 80px -20px rgba(29,25,22,.45);
  --r-s:8px;--r-m:14px;--r-l:22px;
  --ease:cubic-bezier(.2,.8,.2,1);
  --spring:cubic-bezier(.34,1.56,.64,1);
  --font-display:"Fraunces",Georgia,"Times New Roman",serif;
  --font-ui:"Instrument Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
body{margin:0;font-family:var(--font-ui);font-size:16px;line-height:1.5;color:var(--soot);background:var(--white);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
a{color:inherit}
h1,h2,h3,h4{margin:0;font-family:var(--font-display);font-weight:700;letter-spacing:-.015em;line-height:1.05;font-variation-settings:"SOFT" 50}
p{margin:0}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--fire);outline-offset:2px;border-radius:6px}
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.num{font-variant-numeric:tabular-nums}

/* Buttons */
.btn{--bg:var(--soot);--fg:#fff;display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:46px;padding:0 20px;border:0;border-radius:999px;background:var(--bg);color:var(--fg);font-weight:600;font-size:15px;text-decoration:none;white-space:nowrap;transition:transform .15s var(--ease),background .2s,box-shadow .2s,opacity .2s}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0) scale(.98)}
.btn:disabled,.btn[aria-disabled=true]{opacity:.45;cursor:not-allowed;transform:none}
.btn-primary{--bg:var(--brick);box-shadow:0 8px 20px -8px rgba(143,29,20,.6)}
.btn-primary:hover{--bg:var(--brick-2)}
.btn-ghost{--bg:transparent;--fg:var(--soot);box-shadow:inset 0 0 0 1.5px var(--stone-2)}
.btn-ghost:hover{box-shadow:inset 0 0 0 1.5px var(--soot)}
.btn-soft{--bg:var(--flour);--fg:var(--soot)}
.btn-soft:hover{--bg:var(--stone)}
.btn-danger{--bg:#fff;--fg:var(--brick);box-shadow:inset 0 0 0 1.5px #e7b9b2}
.btn-danger:hover{--bg:var(--brick-soft)}
.btn-green{--bg:var(--basil)}
.btn-wide{width:100%}
.btn-sm{min-height:36px;padding:0 14px;font-size:14px}
.btn-lg{min-height:56px;padding:0 28px;font-size:16px}
.icon-btn{display:inline-grid;place-items:center;width:42px;height:42px;border:0;border-radius:50%;background:var(--flour);color:var(--soot);transition:background .2s,transform .15s}
.icon-btn:hover{background:var(--stone)}
.icon-btn svg,.btn svg{width:20px;height:20px;flex:none}

/* Forms */
.field{display:grid;gap:6px;font-size:14px;font-weight:600;color:var(--soot)}
.field small,.hint{font-weight:400;color:var(--ash);font-size:13px}
.input,.field input:not([type=checkbox]):not([type=radio]):not([type=file]),.field select,.field textarea{width:100%;min-height:48px;padding:12px 14px;border:1.5px solid var(--stone);border-radius:12px;background:#fff;font-weight:400;font-size:16px;transition:border-color .2s,box-shadow .2s}
.field textarea{min-height:88px;resize:vertical;line-height:1.45}
.field input:focus,.field select:focus,.field textarea:focus,.input:focus{outline:0;border-color:var(--soot);box-shadow:0 0 0 4px rgba(239,125,26,.18)}
.field input:user-invalid,.field textarea:user-invalid{border-color:var(--brick-2)}
.check{display:flex;gap:10px;align-items:flex-start;font-size:15px;font-weight:500;cursor:pointer}
.check input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--brick);flex:none}
.error-text{color:var(--brick-2);font-size:14px;font-weight:600;min-height:0}
.error-text:empty{display:none}

/* Toasts */
.toasts{position:fixed;z-index:1000;left:50%;bottom:24px;transform:translateX(-50%);display:grid;gap:8px;justify-items:center;pointer-events:none;width:min(92vw,440px)}
.toast{display:flex;align-items:center;gap:10px;padding:12px 18px;border-radius:14px;background:var(--soot);color:#fff;font-weight:600;font-size:15px;box-shadow:var(--shadow-3);animation:toast-in .35s var(--spring)}
.toast.out{animation:toast-out .25s var(--ease) forwards}
.toast i{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--fire);flex:none}
.toast.ok i{background:#4ade80}.toast.bad i{background:#f87171}
@keyframes toast-in{from{opacity:0;transform:translateY(16px) scale(.96)}}
@keyframes toast-out{to{opacity:0;transform:translateY(8px)}}

/* Dialog base */
dialog{padding:0;border:0;color:inherit;background:transparent;max-width:none;max-height:none}
dialog::backdrop{background:rgba(29,25,22,.55);backdrop-filter:blur(3px)}
dialog[open]{animation:dialog-in .35s var(--ease)}
@keyframes dialog-in{from{opacity:0;transform:translateY(18px) scale(.985)}}