/* Ember & Co. design tokens, verbatim from the Claude Design system
   ember-co-design-system-c4c70c7b (tokens/colors, typography, spacing, elevation, motion, base).
   Fonts load from Google Fonts via <link> in each page head. */

/* tokens/colors.css */
:root{
/* Cream / parchment — the label stock and the page */
--cream-50:#FCFAF5;--cream-100:#F8F3E9;--cream-200:#F1EADB;--cream-300:#E6DCC7;--parchment:#F4EDDF;
/* Charcoal ink — etching line + all type */
--ink-900:#14110F;--ink-800:#221E1B;--ink-700:#332D28;--ink-600:#4A423B;--ink-500:#6B615A;--ink-400:#8E847B;--ink-300:#B4AAA0;--ink-200:#D6CEC5;--ink-100:#E8E2DA;
/* Warm wood — the turned lid */
--wood-700:#7A5433;--wood-600:#9A6E43;--wood-500:#B98A55;--wood-400:#D0A978;--wood-300:#DFC298;--wood-200:#E7D2B4;
/* Polished clear glass — the vessel */
--glass-300:#DDE0DB;--glass-200:#E9EAE6;--glass-100:#F2F3F0;
/* Collection accents — one per Firenze scent, used sparingly as a keyline or dot */
--scent-buchette:#6E2130;--scent-boboli:#C08A2A;--scent-oltrarno:#3B302A;
/* Semantic status */
--status-success:#3F6152;--status-warning:#B07C1E;--status-error:#8C2F27;--status-info:#4A423B;

/* ——— Semantic aliases (use these in components) ——— */
--surface-page:var(--cream-100);
--surface-card:var(--cream-50);
--surface-raised:#FFFFFF;
--surface-label:var(--parchment);
--surface-sunken:var(--cream-200);
--surface-ink:var(--ink-900);
--surface-glass:var(--glass-200);
--text-strong:var(--ink-900);
--text-body:var(--ink-700);
--text-muted:var(--ink-500);
--text-faint:var(--ink-400);
--text-inverse:var(--cream-100);
--text-accent:var(--wood-700);
--border-hairline:var(--ink-200);
--border-rule:var(--ink-900);
--border-strong:var(--ink-700);
--border-muted:var(--ink-100);
--accent:var(--wood-600);
--accent-hover:var(--wood-700);
--focus-ring:var(--ink-900);
--overlay-scrim:rgba(20,17,15,.42);
}

/* tokens/typography.css */
:root{
--font-serif-display:"Cormorant Garamond",Georgia,"Times New Roman",serif;
--font-sans:"Jost","Helvetica Neue",Arial,sans-serif;
--font-body:var(--font-sans);
--font-title:var(--font-serif-display);

/* Scale — display sizes are serif caps; body sizes are sans */
--text-display-xl:76px;--text-display-l:56px;--text-display-m:40px;--text-display-s:30px;
--text-title:24px;--text-subtitle:20px;
--text-body-l:17px;--text-body-m:15px;--text-body-s:13.5px;
--text-caption:12px;--text-rim:10.5px;

--leading-tight:1.04;--leading-title:1.16;--leading-snug:1.35;--leading-body:1.62;--leading-loose:1.8;

/* Tracking — letterspaced caps are the brand's signature */
--tracking-rim:.28em;      /* curved rim / eyebrow typography */
--tracking-caps:.18em;     /* scent titles, buttons, nav */
--tracking-caps-tight:.1em;
--tracking-normal:0;
--tracking-italic:.01em;

--weight-light:300;--weight-regular:400;--weight-medium:500;--weight-semibold:600;

/* Composed roles */
--type-eyebrow:var(--weight-medium) var(--text-rim)/1.4 var(--font-sans);
--type-scent-title:var(--weight-semibold) var(--text-display-m)/var(--leading-title) var(--font-serif-display);
--type-subhead-italic:italic var(--weight-light) var(--text-subtitle)/var(--leading-snug) var(--font-serif-display);
--type-body:var(--weight-light) var(--text-body-m)/var(--leading-body) var(--font-sans);
--type-button:var(--weight-medium) var(--text-caption)/1 var(--font-sans);
}

/* tokens/spacing.css */
:root{
--space-0:0;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;--space-7:44px;--space-8:64px;--space-9:88px;--space-10:120px;--space-11:160px;
--gutter:24px;--gutter-wide:44px;
--container-max:1280px;--container-text:640px;--container-narrow:460px;
--section-y:var(--space-10);--section-y-compact:var(--space-8);
/* Architectural, not rounded: radii stay near-square. */
--radius-0:0;--radius-xs:1px;--radius-sm:2px;--radius-md:3px;--radius-round:999px;
--hairline:1px;--rule:1.5px;--rule-heavy:2px;
--label-round:2.5in;--label-bottom:2.25in;
}

/* tokens/elevation.css */
:root{
/* Shadows are warm, low and diffuse — light falling across linen, never neutral grey */
--shadow-0:none;
--shadow-1:0 1px 2px rgba(20,17,15,.06);
--shadow-2:0 2px 14px -4px rgba(20,17,15,.10);
--shadow-3:0 18px 44px -18px rgba(20,17,15,.22);
--shadow-lift:0 26px 60px -24px rgba(20,17,15,.28);
--shadow-inset-hairline:inset 0 0 0 1px var(--border-hairline);
--shadow-inset-rule:inset 0 0 0 1px var(--border-rule);
--glow-ember:0 0 40px -6px rgba(192,138,42,.35);
/* Protection gradient for type over imagery */
--scrim-bottom:linear-gradient(to top,rgba(20,17,15,.62),rgba(20,17,15,0) 62%);
--scrim-page:linear-gradient(to bottom,rgba(248,243,233,.94),rgba(248,243,233,0));
--blur-veil:saturate(104%) blur(14px);
}

/* tokens/motion.css */
:root{
--dur-instant:90ms;
--dur-fast:160ms;
--dur-base:240ms;
--dur-slow:420ms;
--dur-veil:680ms;
--ease-standard:cubic-bezier(.2,.6,.2,1);
--ease-out-soft:cubic-bezier(.16,.84,.44,1);
--ease-in-out-quiet:cubic-bezier(.4,0,.2,1);
--motion-fade:opacity var(--dur-base) var(--ease-standard);
--motion-rise:transform var(--dur-base) var(--ease-out-soft),opacity var(--dur-base) var(--ease-standard);
--rise-distance:6px;
}

/* tokens/base.css */
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--surface-page);color:var(--text-body);font:var(--type-body);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--font-serif-display);color:var(--text-strong);font-weight:var(--weight-semibold);margin:0;line-height:var(--leading-title)}
p{margin:0 0 var(--space-4)}
a{color:var(--text-strong);text-decoration:none;border-bottom:1px solid var(--ink-300);transition:var(--motion-fade),border-color var(--dur-fast) var(--ease-standard)}
a:hover{color:var(--text-accent);border-color:var(--wood-500)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:1px solid var(--focus-ring);outline-offset:3px}
::selection{background:var(--wood-200);color:var(--ink-900)}
.eyebrow{font:var(--type-eyebrow);letter-spacing:var(--tracking-rim);text-transform:uppercase;color:var(--text-muted)}
.rule{height:var(--hairline);background:var(--border-hairline);border:0}