/* ============================================================ NASTASI FOODS — Design Tokens Direction: "Provenance / The Import House" Green is the hero. Red appears only as customs-stamp ink. ============================================================ */ :root { /* ---- Color: restrained 5-color system ---- */ --ink: #16140F; /* warm espresso near-black */ --ink-soft: #2A2720; /* softened ink for large dark fills */ --green-900: #1F2A18; /* deep olive / bottle green — primary brand surface */ --green-800: #2C3A22; /* raised dark-green surface */ --olive-600: #5C6B43; /* mid olive — accents, hovers, rules */ --olive-400: #8A986C; /* light olive — muted text on dark */ --bone: #E9E1CE; /* warm aged paper — primary light bg */ --bone-deep: #DED4BC; /* deeper paper for cards on bone */ --bone-pure: #F4EFE2; /* lightest paper, for cards/inputs */ --brass: #A87B3D; /* brass / ochre — metallic accent, sparingly */ --brass-soft: #C39A5B; /* lighter brass for hovers on dark */ --stamp: #9E3B2E; /* oxblood customs-stamp red — stamp marks only */ /* ---- The label palette ---- Lifted off the tins and packets themselves: San Marzano red, saffron, basil, and the pale blue every Italian conserve label is printed on. These carry the lively surfaces (cards, ribbons, ticket buttons); the olive/bone system above still holds the page. */ --tomato: #C8462E; --tomato-hot: #DD5334; --saffron: #E9A93C; --saffron-hot: #F5B94E; --basil: #6E8B3D; /* The pale card surface. It used to be the Adriatic blue every conserve label is printed on; Sergio asked for green, so it is now the pistachio off a Bronte tin — same job (a light surface you can print ink on), same luminance band, so nothing that sat on the blue needs re-measuring. The --adriatic-* names are kept as aliases: every card, ticket button, step card and glow in the site already points at them. */ --pistachio: #C4DBB3; /* pale label green — a light surface, not an accent */ --pistachio-mid: #A6C68C; /* hover / deeper edge of the same chip */ --pistachio-ink: #22331A; /* label ink: 10.9:1 on --pistachio */ --adriatic: var(--pistachio); --adriatic-mid: var(--pistachio-mid); --adriatic-ink: var(--pistachio-ink); /* ---- Semantic mappings ---- */ --bg: var(--bone); --bg-elevated: var(--bone-pure); --text: var(--ink); --text-muted: #5B5547; /* warm gray on bone (AA on bone) */ --text-faint: #7A7363; --on-dark: #F1EAD9; /* primary text on green/ink */ --on-dark-muted: #B9C0A2; /* muted text on dark (olive-tinted) */ --line: rgba(22,20,15,.14); --line-strong: rgba(22,20,15,.26); --line-on-dark: rgba(241,234,217,.16); --focus: var(--brass); --success: #3F6B3A; --danger: var(--stamp); /* ---- Typography ---- Three faces, from Sergio's colour-coded brief of 13 Aug 2026. The faces themselves are declared in fonts.css, which loads before this sheet. Lenia Sans the interface voice — body, navigation, headlines, and the label strips that used to be monospaced. His cyan marks cover all three of those roles, so they collapse into one family and the distinction is now carried by tracking and case rather than by a second typeface. GC Commune the display serif — headings, ticket buttons, prices, the address block. Single weight, no italic. The Foriene the emphasised word inside a headline, nothing else. --font-mono keeps its NAME because 102 declarations point at it and the role it marks (label type: uppercase, wide tracking) is still real. It is no longer a monospace, so anything that needs figures to line up in a column must ask for `font-variant-numeric: tabular-nums` itself. */ --font-display: "GC Commune", "Iowan Old Style", Georgia, "Times New Roman", serif; --font-body: "Lenia Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: "Lenia Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; /* margin notes: the buyer's hand on a case label, not a decorative flourish. Untouched by the 2026-08-13 change, at Sergio's explicit request. */ --font-script: "Caveat", "Segoe Script", "Bradley Hand", cursive; /* the headline voice is the same sans, set heavier and tighter */ --font-hero: "Lenia Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; /* the accent: only ever an inside a heading */ --font-accent: "The Foriene", "Iowan Old Style", Georgia, serif; /* Fluid type scale (mobile → desktop) */ --fs-eyebrow: 0.75rem; --fs-micro: 0.8125rem; --fs-small: 0.9375rem; --fs-body: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem); --fs-lead: clamp(1.125rem, 1.04rem + 0.42vw, 1.375rem); --fs-h4: clamp(1.1rem, 1rem + 0.5vw, 1.3rem); --fs-h3: clamp(1.35rem, 1.15rem + 1vw, 1.85rem); --fs-h2: clamp(1.9rem, 1.4rem + 2.5vw, 3.1rem); --fs-h1: clamp(2.6rem, 1.7rem + 4.6vw, 5.25rem); --fs-display: clamp(3rem, 1.6rem + 7vw, 7rem); --lh-tight: 1.04; --lh-snug: 1.18; --lh-body: 1.62; --tracking-eyebrow: 0.22em; --tracking-mono: 0.04em; /* ---- Spacing scale (8pt rhythm) ---- */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4rem; --sp-9: 6rem; --sp-10: 8rem; --sp-11: 11rem; /* Section vertical rhythm */ --section-y: clamp(4rem, 2.5rem + 7vw, 9rem); /* ---- Layout ---- */ --maxw: 1280px; --maxw-text: 64ch; --gutter: clamp(1.25rem, 0.5rem + 3.5vw, 4rem); /* Fluid, so the paper docket bar covers the same slice of the screen at any browser zoom. 5.9vw is the exact ratio that holds 76px at Sergio's 1280 CSS viewport, so the bar he signed off on at 100% does not move; zooming out to 1600 lifts it to ~94px, which is the same physical size. */ --header-h: clamp(70px, 5.9vw, 116px); /* ---- Radii ---- */ --r-xs: 3px; --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-xl: 24px; --r-pill: 999px; /* ---- Shadows / elevation ---- */ --shadow-sm: 0 1px 2px rgba(22,20,15,.06), 0 2px 6px rgba(22,20,15,.05); --shadow-md: 0 6px 18px rgba(22,20,15,.10), 0 2px 6px rgba(22,20,15,.06); --shadow-lg: 0 24px 60px rgba(22,20,15,.18), 0 8px 20px rgba(22,20,15,.10); --shadow-brass: 0 10px 30px rgba(168,123,61,.28); /* ---- Motion ---- */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dur-fast: 160ms; --dur-mid: 280ms; --dur-slow: 520ms; /* ---- Z-index scale ---- */ --z-base: 0; --z-raised: 10; --z-sticky: 40; --z-header: 60; --z-overlay: 80; --z-drawer: 90; --z-toast: 120; }