/* ========================================================================== Tre Zero Uno — design tokens Sampled from assets/logo.jpeg and assets/post.jpeg. The brand is a near-black field, warm off-white type, a single gold accent, and the Italian tricolore used as a rule — never as decoration. ========================================================================== */ :root { /* ---------------------------------------------------------------- colour */ /* The logo's background: warm black, not neutral. Everything sits on it. */ --nero: #0a0908; --nero-raised: #121110; /* cards lifted off the page */ --nero-sunken: #060505; /* wells, inputs */ --nero-line: #201d1a; /* hairline dividers */ /* Wordmark cream. Body copy sits one step down for comfort. */ --crema: #f2ebdf; --crema-muted: #b8ad9d; --crema-faint: #776e63; /* The arc above the wordmark. The only accent the brand gets. */ --oro: #c29b62; --oro-bright: #dfc49a; --oro-deep: #8c6b3d; /* Tricolore, from the ring beneath the wordmark. Used as a rule and for status only — never as a fill. */ --verde: #1b7a3e; --bianco: #f7f4ee; --rosso: #d0212b; /* Semantic status colours. Scarcity runs gold → red as stock drains. */ --status-ok: var(--verde); --status-warn: var(--oro); --status-critical: var(--rosso); /* ------------------------------------------------------------ typography */ /* Cormorant Garamond matches the logo's high-contrast serif; Jost carries the wide-tracked uppercase captions from the Instagram post. */ --font-display: "Cormorant Garamond", "Times New Roman", serif; --font-body: "Jost", "Helvetica Neue", -apple-system, sans-serif; --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.375rem; --text-2xl: 1.875rem; --text-3xl: 2.5rem; --text-4xl: 3.5rem; --text-5xl: clamp(3rem, 12vw, 6.5rem); /* The post sets uppercase captions very wide. This is the brand's signature. */ --tracking-wide: 0.18em; --tracking-wider: 0.32em; --tracking-display: 0.06em; --leading-tight: 1.1; --leading-snug: 1.35; --leading-normal: 1.65; /* ---------------------------------------------------------------- space */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4rem; --space-9: 6rem; --space-10: 8rem; /* ---------------------------------------------------------------- shape */ --radius-sm: 2px; --radius-md: 4px; --radius-lg: 8px; --radius-full: 999px; --border-hairline: 1px solid var(--nero-line); --border-oro: 1px solid color-mix(in srgb, var(--oro) 40%, transparent); /* --------------------------------------------------------------- motion */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --duration-fast: 140ms; --duration-base: 260ms; --duration-slow: 600ms; /* --------------------------------------------------------------- layout */ --container: 1180px; --container-narrow: 720px; /* --------------------------------------------------------------- depth */ --shadow-soft: 0 18px 50px -24px rgb(0 0 0 / 0.9); --shadow-lift: 0 28px 70px -30px rgb(0 0 0 / 1); --glow-oro: 0 0 40px -12px color-mix(in srgb, var(--oro) 55%, transparent); } /* The kitchen tablet runs in a dark room at arm's length: bigger type, bigger touch targets, higher contrast. Same palette, different ergonomics. `data-surface` is set on (base.html's {% block body_attrs %}), not — so this targets `body`, not `:root`. Custom properties declared here still cascade to every descendant the same way. */ body[data-surface="kitchen"] { --text-base: 1.125rem; --text-lg: 1.375rem; --text-xl: 1.75rem; --text-2xl: 2.25rem; --touch-target: 64px; }