/* ============================================================================= CAVALLINO V2 · TOKENS The single source of truth for colour, type, space, gutters, radius, border, shadow and motion — plus the three modes of ONE system. Components never hard-code a colour. They consume the semantic surface tokens (--ground, --on-ground, --rule, --accent …). A mode remaps those tokens; it never introduces a second identity. ========================================================================== */ :root { /* ---------------------------------------------------------------- palette Warm wood and espresso, aged ivory, warm charcoal, restrained brass. Espresso is a deep WARM brown. Pure black is never used as a ground. */ --espresso-900: #14100B; /* deepest ground, used sparingly */ --espresso-800: #1C1611; /* primary espresso ground */ --espresso-700: #262019; /* raised espresso surface */ --espresso-600: #342C22; /* espresso rules and edges */ /* Measured, not invented: the median ground of the supplied crest master, sampled from assets/brand/crest-d480.png. The identity surface uses this exact value so the opaque artwork integrates with no visible plaque. */ --brand-ground: #311D00; --ivory: #F7F2E7; /* aged ivory — natural page ground */ --sand: #EFE6D6; /* second natural plane */ --sand-deep: #E1D5BF; /* third plane, rules on light */ --ink: #191512; /* primary text on light */ --charcoal: #211C17; /* warm near-black */ --muted: #6F6558; /* secondary text on light */ --brass: #B08D57; /* THE accent — carried from Approved V1 */ --brass-bright: #D6BC8C; /* accent text on espresso */ --brass-deep: #8E6E3E; /* accent edge / pressed */ /* --------------------------------------------------------------- typography Two families only. Cormorant Garamond displays, Jost speaks. */ --font-display: "Cormorant Garamond", "Iowan Old Style", Georgia, serif; --font-text: "Jost", "Avenir Next", "Segoe UI", Helvetica, Arial, sans-serif; /* Calibrated against rendered screenshots at 1440 / 1024 / 390. The lower bound must survive a 390px viewport without clipping a long German word. */ --fs-display: clamp(2.3rem, 6.4vw, 5.9rem); --fs-h1: clamp(2rem, 4.6vw, 4.1rem); --fs-h2: clamp(1.65rem, 3.1vw, 2.8rem); --fs-h3: clamp(1.25rem, 1.9vw, 1.65rem); --fs-lead: clamp(1.06rem, 1.25vw, 1.28rem); --fs-body: 1.0625rem; --fs-small: 0.9375rem; --fs-label: 0.8125rem; --lh-display: 1.02; --lh-title: 1.1; --lh-lead: 1.5; --lh-body: 1.62; --tr-display: -0.012em; /* large display tightens */ --tr-label: 0.16em; /* the ONE tracked role: field labels */ /* -------------------------------------------------------------- space scale */ --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px; --s11: 176px; /* ------------------------------------------------------------------ gutters A wide, intentional, fluid gutter system. Deliberately NOT a single mechanical shell: components choose a width ROLE that suits their job. */ --gutter: clamp(20px, 4.6vw, 88px); --w-wide: 1680px; /* full editorial width, large media */ --w-band: 1280px; /* standard content band */ --w-text: 68ch; /* comfortable reading measure */ --w-narrow: 46ch; /* leads and short statements */ /* --------------------------------------------------- radius / border / shadow Restrained by law: no rounded card language, no decorative shadows. */ --r-flat: 0; --r-ctl: 2px; /* interactive controls only */ --bd-hair: 1px; --bd-state: 2px; /* Exactly one lift, reserved for the booking instrument where it crosses the hero edge. Not a general card shadow. */ --shadow-lift: 0 28px 64px -34px rgba(16, 11, 6, 0.62); /* ------------------------------------------------------------------- motion Tokens only in this foundation round. Motion is restrained, reversible and always opt-out safe. */ --dur-1: 160ms; --dur-2: 320ms; --ease: cubic-bezier(0.2, 0.6, 0.2, 1); /* ------------------------------------------------------------ default mode Natural editorial is the resting mode of the system. */ --ground: var(--ivory); --ground-raised: var(--sand); --ground-sunken: var(--sand-deep); --on-ground: var(--ink); --on-ground-muted: var(--muted); --rule: var(--sand-deep); --accent: var(--brass); --accent-on: var(--ink); --accent-text: var(--brass-deep); --field-bg: #FFFDF8; --field-bd: rgba(25, 21, 18, 0.22); } /* ----------------------------------------------------------------------------- THE THREE MODES — one system, three registers. Every mode keeps the same type, the same accent, the same spacing logic and the same component language. Only the surface tokens change. -------------------------------------------------------------------------- */ /* Natural editorial — dining, cuisine, editorial content */ [data-mode="natural"] { --ground: var(--ivory); --ground-raised: var(--sand); --ground-sunken: var(--sand-deep); --on-ground: var(--ink); --on-ground-muted: var(--muted); --rule: var(--sand-deep); --accent: var(--brass); --accent-on: var(--ink); --accent-text: var(--brass-deep); --field-bg: #FFFDF8; --field-bd: rgba(25, 21, 18, 0.22); } /* Espresso cinematic — arrival, bar, horse, closing reservation */ [data-mode="espresso"] { --ground: var(--espresso-800); --ground-raised: var(--espresso-700); --ground-sunken: var(--espresso-900); --on-ground: var(--ivory); --on-ground-muted: rgba(247, 242, 231, 0.72); --rule: var(--espresso-600); --accent: var(--brass); --accent-on: var(--ink); --accent-text: var(--brass-bright); --field-bg: rgba(247, 242, 231, 0.06); --field-bd: rgba(247, 242, 231, 0.30); } /* Functional utility — booking, filtering, contact, forms. Highest clarity: brighter ground, firmer rules, larger targets. */ [data-mode="utility"] { --ground: #FFFDF8; --ground-raised: var(--ivory); --ground-sunken: var(--sand); --on-ground: var(--charcoal); --on-ground-muted: var(--muted); --rule: rgba(25, 21, 18, 0.16); --accent: var(--brass); --accent-on: var(--ink); --accent-text: var(--brass-deep); --field-bg: #FFFFFF; --field-bd: rgba(25, 21, 18, 0.28); }