/* Design system Vannini Professione Casa — token dal progetto Claude Design
   da4d64f3-7601-47cf-aad6-14069778df08, appiattiti qui in un unico file
   (nel progetto sono in tokens/*.css importati da styles.css). */

/* Webfonts via Google Fonts CDN.
   Display: Bitter (slab serif — solidità artigiana). Body/UI: Work Sans. */
@import url("https://fonts.googleapis.com/css2?family=Bitter:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Work+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap");

:root{
/* Base — warm ink & plaster */
--ink-900:#2b241f; --ink-800:#3a322b; --ink-700:#4d443b;
--stone-600:#6b6157; --stone-500:#857a6e; --stone-400:#a3988b;
--sand-300:#cfc6b8; --sand-200:#e4ddd1; --sand-100:#f0ebe1;
--plaster-50:#f7f3ec; --paper-0:#fffdf8;
/* Brand — terracotta (cotto) */
--terracotta-700:#8a3d1f; --terracotta-600:#a64b2a; --terracotta-500:#b95c39; --terracotta-100:#f2ddd2; --terracotta-50:#f9efe9;
/* Secondary — ocra (intonaco caldo), usato con parsimonia */
--ochre-600:#9c7433; --ochre-100:#f0e4cd;
/* Semantic */
--green-600:#4a7c59; --green-100:#e0ecdf;
--red-600:#a03232; --red-100:#f3dcdc;
--amber-600:#b7791f; --amber-100:#f5e8cf;
--blue-600:#3e6b8c; --blue-100:#dde8f0;
/* Semantic aliases */
--text-body:var(--ink-800); --text-heading:var(--ink-900); --text-muted:var(--stone-600); --text-inverse:var(--paper-0);
--text-brand:var(--terracotta-600); --text-link:var(--terracotta-700);
--surface-page:var(--plaster-50); --surface-card:var(--paper-0); --surface-sunken:var(--sand-100); --surface-inverse:var(--ink-900); --surface-brand:var(--terracotta-600); --surface-brand-hover:var(--terracotta-700); --surface-brand-soft:var(--terracotta-50);
--border-default:var(--sand-200); --border-strong:var(--sand-300); --border-input:var(--stone-400); --border-focus:var(--terracotta-600);
--state-success:var(--green-600); --state-success-bg:var(--green-100);
--state-danger:var(--red-600); --state-danger-bg:var(--red-100);
--state-warning:var(--amber-600); --state-warning-bg:var(--amber-100);
--state-info:var(--blue-600); --state-info-bg:var(--blue-100);

/* Typography */
--font-display:"Bitter",Georgia,serif;
--font-body:"Work Sans",system-ui,sans-serif;
/* Scale (1.25 major third, 16px base) */
--fs-display:49px; --fs-h1:39px; --fs-h2:31px; --fs-h3:25px; --fs-h4:20px; --fs-body:16px; --fs-small:14px; --fs-caption:12.5px;
--lh-tight:1.15; --lh-heading:1.25; --lh-body:1.55;
--fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700;
--ls-caps:0.08em;
/* Composite aliases */
--type-display:var(--fw-bold) var(--fs-display)/var(--lh-tight) var(--font-display);
--type-h1:var(--fw-bold) var(--fs-h1)/var(--lh-heading) var(--font-display);
--type-h2:var(--fw-semibold) var(--fs-h2)/var(--lh-heading) var(--font-display);
--type-h3:var(--fw-semibold) var(--fs-h3)/var(--lh-heading) var(--font-display);
--type-h4:var(--fw-semibold) var(--fs-h4)/var(--lh-heading) var(--font-body);
--type-body:var(--fw-regular) var(--fs-body)/var(--lh-body) var(--font-body);
--type-small:var(--fw-regular) var(--fs-small)/var(--lh-body) var(--font-body);
--type-caption:var(--fw-medium) var(--fs-caption)/1.4 var(--font-body);
--type-overline:var(--fw-semibold) var(--fs-caption)/1.4 var(--font-body);

/* Spacing */
--sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-9:96px;
--container-max:1120px; --container-pad:var(--sp-5);

/* Radii — piccoli e precisi */
--radius-sm:4px; --radius-md:6px; --radius-lg:10px; --radius-pill:999px;
/* Shadows — calde, discrete */
--shadow-sm:0 1px 2px rgba(43,36,31,0.08);
--shadow-md:0 2px 8px rgba(43,36,31,0.10);
--shadow-lg:0 8px 24px rgba(43,36,31,0.14);
--focus-ring:0 0 0 3px rgba(166,75,42,0.25);
/* Motion — sobrio: solo fade/color, niente rimbalzi */
--ease-standard:cubic-bezier(0.2,0,0,1); --dur-fast:120ms; --dur-base:180ms;
}

/* Base */
body{margin:0;font:var(--type-body);color:var(--text-body);background:var(--surface-page);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{margin:0;color:var(--text-heading)}
h1{font:var(--type-h1)}h2{font:var(--type-h2)}h3{font:var(--type-h3)}h4{font:var(--type-h4)}
p{margin:0}
a{color:var(--text-link);text-decoration:underline;text-underline-offset:2px;transition:color var(--dur-fast) var(--ease-standard)}
a:hover{color:var(--terracotta-500)}
::selection{background:var(--terracotta-100)}