/* ============================================================ RIOJA GUIDE — DESIGN TOKENS Tasting Moments × MDIL · AI Sommelier for La Rioja Alta STRATEGY (Option A): The downstream layer (v2.css, rioja.html, components.css, cards.js) still references the legacy --kt-* variable names. Rather than touch them, we KEEP the --kt-* names and RE-BIND them to a Rioja palette. The semantic role of each token is preserved: --kt-cobalt-700 → Rioja PRIMARY (Tempranillo / aged-wine deep) --kt-berry-* → "live concierge voice" channel (now a warmer clay-red, reads as latest-turn highlight) --kt-sun-500 → "on now / tonight" (now a sun-bleached gold) --kt-leaf-500 → "free" (now an olive/sage from late-summer vine) --kt-sand/paper → calcareous-clay sandstone ground The mood we are after: editorial Spanish wine magazine, late- afternoon Briones light on limestone, ink on cream, restrained gold. NOT a vineyard postcard. NOT a Pinterest moodboard. ============================================================ */ :root { /* ---- Color: Brand (Tempranillo / Sangre — primary action) ---- The deep aged-wine red. Looking at a glass of Reserva against candlelight: oxblood with a violet under-tone, never primary red. Desaturated enough to feel ink-like at small sizes (e.g. the "+ add" button, focus rings, the picked-card outline). */ --kt-cobalt-900: #2a0b14; /* Sediment — deepest ink-red, hover state */ --kt-cobalt-700: #6e1a2d; /* TEMPRANILLO — primary. Picks, buttons, links, focus. */ --kt-cobalt-500: #8a2438; /* Decanted — slightly lighter, hover/interactive */ --kt-cobalt-100: #ead2d6; /* Stained linen — picked-card border tint */ --kt-cobalt-050: #f6ebec; /* Wine wash — cobalt pill bg */ /* ---- Color: Neutrals (warm, calcareous) ---- The ink ramp is a near-black with a hint of olive, NOT pure grey — sits comfortably on cream paper and reads "editorial" instead of "SaaS". Line colours pull from sandstone, never cool grey. */ --kt-ink-900: #1c1612; /* Espresso/ink — body text, headings */ --kt-ink-700: #38312b; /* Charcoal-bark */ --kt-ink-500: #6b6058; /* Slate-clay — secondary text, meta */ --kt-ink-400: #968b80; /* Limestone shadow */ --kt-ink-300: #b8ad9f; /* Dusty chalk */ --kt-line: #e4dccc; /* Calcareous chalk border */ --kt-line-soft: #efe9dc; /* Powdered limestone */ --kt-sand: #e9dfca; /* Sonsierra sandstone — no-image card ground */ --kt-paper: #f7f1e3; /* Aged paper / album page — app bg, never white */ --kt-paper-grid: #ebe5d2; /* ~5% darker than paper, neutral cream — no yellow/khaki swing */ --kt-card: #fbf7ec; /* Wax-paper card — warmer than #fff */ --kt-overlay: rgba(28, 22, 18, 0.58); /* ---- Color: Concierge & status (reserved hues) ---- Berry was Helsinki's "live concierge voice". For Rioja it becomes a muted CLAY-RED — distinct from Tempranillo primary (warmer, more terracotta, less violet), so the latest-turn halo and the focus banner read as "Sommelier is speaking now" without competing with picked-state burgundy. */ --kt-berry-700: #9a3b2a; /* Sommelier voice (text) — Logroño tile */ --kt-berry-500: #c25a40; /* Latest-turn / focus banner / NOW line */ --kt-berry-050: #f7e6df; /* Focus banner wash */ /* Sun: changed from primary-yellow to a sun-bleached vine-leaf gold. Reserved for "ON TONIGHT" badge + plan-count pip. */ --kt-sun-500: #d4a24c; /* Late-afternoon gold on Haro stone */ /* Leaf: olive/sage from late-summer Tempranillo canopy. Reserved for "FREE" tag only — restrained, not bright green. */ --kt-leaf-500: #6b7a3a; /* Vine-canopy olive */ --kt-leaf-050: #ecefd8; /* Pale olive wash */ /* ---- Kind hues (event/venue/service differentiation) ---- Subtle, ink-on-cream codes: event = Tempranillo (primary) — for tastings, festivals venue = sandstone violet — bodegas, museums, plazas service = olive — routes, transport, free experiences */ --kt-kind-event: #6e1a2d; --kt-kind-venue: #7a5a8a; --kt-kind-service: #6b7a3a; /* ---- Type ---- Three-voice typographic system: SERIF (display) — Cormorant Garamond. Tall, narrow, with a quietly aristocratic Spanish/Italian feel; reads like a Decanter or World of Fine Wine pull-quote at large sizes. Used ONLY for h1/h2 display (the page sets these inline, so the rule lives in --kt-font-display below). SANS (body) — Inter. We keep it; it has excellent Spanish diacritic coverage, ligatures, and tabular numerals, and matches the existing v2 cascade exactly. MONO (eyebrow / meta) — JetBrains Mono. Slightly more humanist than Geist Mono; reads like a back-label typewriter caption ("HARO · 1894 · CRIANZA"), which is exactly the energy we want for kt-mono micro-labels. The font in rioja.html must be swapped — see design memo. */ --kt-font-display: "Cormorant Garamond", "EB Garamond", "Source Serif Pro", Georgia, "Times New Roman", serif; --kt-font-sans: "Inter", "Source Sans 3", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; --kt-font-mono: "JetBrains Mono", "IBM Plex Mono", "SF Mono", ui-monospace, monospace; --kt-fs-display: 32px; --kt-fs-title: 24px; --kt-fs-head: 19px; --kt-fs-card: 17px; --kt-fs-body: 16px; --kt-fs-small: 14px; --kt-fs-sub: 13px; --kt-fs-meta: 12px; --kt-fs-micro: 11px; --kt-fs-mini: 10px; --kt-lh-tight: 1.15; --kt-lh-body: 1.5; /* opened up slightly — reads more editorial */ /* ---- Spacing (8px scale, unchanged) ---- */ --kt-s-1: 4px; --kt-s-2: 8px; --kt-s-3: 12px; --kt-s-4: 16px; --kt-s-5: 20px; --kt-s-6: 24px; --kt-s-8: 32px; --kt-s-10: 40px; --kt-s-12: 48px; /* ---- Radius ---- Slightly tighter than Helsinki — wine labels and back-bar shelf edges are more squared than Nordic civic UI. Pills still fully rounded so chips feel tactile. */ --kt-r-1: 3px; --kt-r-2: 6px; --kt-r-3: 10px; --kt-r-4: 14px; --kt-r-pill: 999px; /* ---- Elevation ---- Shadows warmed: tinted toward ink-900 (espresso) rather than blue-grey. Card lift is softer, closer to printed-paper shadow than to material-design float. */ --kt-shadow-1: 0 1px 2px rgba(28,22,18,.05), 0 1px 1px rgba(28,22,18,.04); --kt-shadow-2: 0 6px 18px rgba(28,22,18,.07), 0 2px 4px rgba(28,22,18,.05); --kt-shadow-3: 0 14px 44px rgba(28,22,18,.12), 0 4px 12px rgba(28,22,18,.07); /* ---- Motion ---- A touch slower than Helsinki — Rioja is contemplative, not responsive-snap. Still well under perceived-lag threshold. */ --kt-ease: cubic-bezier(.22,.61,.36,1); --kt-dur-fast: 160ms; --kt-dur: 260ms; --kt-dur-slow: 420ms; } @media (prefers-reduced-motion: reduce) { :root { --kt-dur-fast: 0ms; --kt-dur: 0ms; --kt-dur-slow: 0ms; } } /* ============================================================ APP-LEVEL RESET (real app, not artboards) ============================================================ */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; height: 100%; } body { font-family: var(--kt-font-sans); font-feature-settings: "ss01", "cv11", "cv05", "ss03"; font-size: var(--kt-fs-body); line-height: var(--kt-lh-body); color: var(--kt-ink-900); background: var(--kt-paper); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; } a { color: inherit; text-decoration: none; } :focus-visible { outline: 2px solid var(--kt-cobalt-700); outline-offset: 2px; border-radius: 2px; } /* Display serif applied to the top h1/h2 the template renders inline. v2.css sets size/weight; we layer the family + tracking on top. */ h1, h2, .kt-d-main h2, .kt-tl__head h2, .kt-m-head h1 { font-family: var(--kt-font-display); font-weight: 500; letter-spacing: -0.01em; } /* utilities */ .kt-mono { font-family: var(--kt-font-mono); font-variant-numeric: tabular-nums; letter-spacing: .04em; } .kt-tap { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; } .kt-scroll { overflow-y: auto; scrollbar-width: none; } .kt-scroll::-webkit-scrollbar { display: none; } .kt-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }