/* ============================================================================ LunchDrive — Design Tokens Single source of truth: colour, type, spacing, radius, shadow, layout. Drop this file in and reference the CSS custom properties everywhere. Ratified across: Stage 3 (colour) · Stage 4 (type) · Landing/Dashboard/Kiosk. UI primary stays #0E6FB8 (AA 5.3 on white). The 2026 logo wears its own #1A77C1 — that is intentional and documented below. ============================================================================ */ /* Font se načítá přes v index.html — spolehlivější na hostingu */ :root { /* ========================================================================== 1 · BRAND COLOUR ========================================================================== */ /* --- Primary · "Evolved Azure" (the working brand colour) --- */ --blue-50: #ECF5FC; --blue-100: #CFE6F6; --blue-200: #A6D0EE; --blue-300: #6FB2E0; --blue-400: #3690D0; --blue-500: #1B7CC4; --blue-600: #0E6FB8; /* PRIMARY — buttons, links, focus (AA 5.3 on #fff) */ --blue-700: #0A5C9B; /* hover / coloured text on light (AAA 7.1) */ --blue-800: #0B4B7D; --blue-900: #0C3D64; /* --- Secondary · "Fresh Mint" (supporting accent, ≤15% of a screen) --- */ --mint-50: #E9F8F1; --mint-100: #CDEFE1; --mint-200: #9FE0C7; --mint-300: #66CDA8; --mint-400: #3AC093; --mint-500: #22B98A; /* ACCENT — success fills, accent CTA */ --mint-600: #149E73; --mint-700: #117E5D; /* mint text on light (AA 4.8) */ --mint-800: #115F47; --mint-900: #0E4A38; /* --- Warm neutrals (the 70% — structure & content) --- */ --n-50: #FBFAF7; /* app background / paper */ --n-100: #F4F2EC; /* warm surface */ --n-200: #E8E3DA; /* borders */ --n-300: #D7D0C5; --n-400: #B5AEA1; --n-500: #8B8478; /* muted text */ --n-600: #6A6459; /* secondary text */ --n-700: #4C4943; --n-800: #312F2B; --n-900: #1B2126; /* primary ink (AAA 14 on #fff) */ /* --- Semantic roles (each: solid · soft bg · border · accessible text) --- */ --success: #149E73; --success-bg: #E9F8F1; --success-border: #CDEFE1; --success-text: #117E5D; --warning: #C77D11; --warning-bg: #FBF3E2; --warning-border: #F3DFB8; --warning-text: #9A5E08; --error: #CE4B3B; --error-bg: #FBEDEA; --error-border: #F4D2CA; --error-text: #B23A2B; --info: #0E6FB8; --info-bg: #ECF5FC; --info-border: #CFE6F6; --info-text: #0A5C9B; /* --- Brand reference (do not use as UI fills) --- */ --logo-ink: #121B22; /* "Lunch" wordmark */ --logo-blue: #1A77C1; /* "drive" wordmark + checkmark */ --logo-blue2: #2483C8; /* logo gradient stop */ --logo-plate: #E5F5FB; /* logo plate fill */ --azure-legacy:#2E83BA; /* pre-2026 logo blue — secondary tint only */ /* --- Convenience aliases (used throughout the product) --- */ --ink: #1B2126; --ink-soft: #444E57; --muted: #79828C; --muted-soft: #9AA1A9; --line: #E8E3DA; --line-soft: #F0ECE4; --paper: #FBFAF7; --surface: #FFFFFF; --surface-warm: #F5F2EC; /* ========================================================================== 2 · AMBIENT GRADIENT ("the atmosphere" — BACKGROUND ONLY) Soft blue→lilac→pink blooms. Never on text, data, or controls. Lilac/pink live ONLY here; brand UI stays azure + mint. ========================================================================== */ --bloom-azure: 64,150,224; --bloom-violet: 142,118,222; --bloom-pink: 226,150,196; --grad-whisper: /* app backgrounds — barely-there */ radial-gradient(72% 95% at 8% 12%, rgba(var(--bloom-azure),.10), transparent 60%), radial-gradient(64% 82% at 94% 22%, rgba(var(--bloom-violet),.09), transparent 62%), radial-gradient(60% 74% at 80% 98%, rgba(var(--bloom-pink),.07), transparent 60%); --grad-soft: /* sections, cards */ radial-gradient(70% 92% at 6% 10%, rgba(var(--bloom-azure),.16), transparent 60%), radial-gradient(62% 80% at 96% 22%, rgba(var(--bloom-violet),.15), transparent 62%), radial-gradient(58% 72% at 82% 98%, rgba(var(--bloom-pink),.11), transparent 60%); --grad-hero: /* marketing hero, kiosk welcome */ radial-gradient(64% 90% at 4% 8%, rgba(var(--bloom-azure),.26), transparent 58%), radial-gradient(58% 82% at 98% 18%, rgba(var(--bloom-violet),.24), transparent 60%), radial-gradient(60% 78% at 86% 100%,rgba(var(--bloom-pink),.18), transparent 60%); --glow-focal: /* halo behind a hero card / illustration */ radial-gradient(60% 80% at 30% 30%, rgba(14,111,184,.30), transparent 60%), radial-gradient(50% 70% at 80% 80%, rgba(34,185,138,.22), transparent 60%); /* ========================================================================== 3 · TYPOGRAPHY Poppins = display (headings, wordmark, buttons). Inter = body, UI, data (always tabular-nums for numbers). ========================================================================== */ --font-display: 'Plus Jakarta Sans', system-ui, sans-serif; --font-body: 'Plus Jakarta Sans', system-ui, sans-serif; --t-display: clamp(40px, 6vw, 72px); /* Poppins 700 · lh 1.04 · -0.035em */ --t-h1: clamp(32px, 4.4vw, 48px); /* Poppins 700 · lh 1.10 · -0.03em */ --t-h2: clamp(26px, 3.4vw, 36px); /* Poppins 600 · lh 1.15 · -0.02em */ --t-h3: 24px; /* Poppins 600 · lh 1.20 */ --t-h4: 20px; /* Poppins 600 · lh 1.30 */ --t-lead: clamp(18px, 2.2vw, 21px); /* Inter 400 · lh 1.50 */ --t-body: 17px; /* Inter 400 · lh 1.60 */ --t-sm: 15px; /* Inter 400 · lh 1.55 */ --t-caption: 13px; /* Inter 600 · +0.08em · UPPERCASE */ --fw-regular: 400; --fw-medium: 500; --fw-semibold:600; --fw-bold: 700; /* ========================================================================== 4 · SPACING (4-based scale — use for padding, gap, margins) ========================================================================== */ --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; --space-32: 128px; /* Vertical rhythm for marketing section padding */ --section-y: clamp(72px, 9vw, 130px); /* ========================================================================== 5 · RADIUS ========================================================================== */ --r-xs: 4px; /* chips, tags */ --r-sm: 8px; /* inputs, small buttons */ --r-md: 12px; /* buttons, cards, list items */ --r-lg: 18px; /* panels */ --r-xl: 28px; /* large surfaces, hero cards, modals */ --r-full: 999px; /* pills, avatars, toggles */ /* ========================================================================== 6 · SHADOW / ELEVATION (soft, warm-tinted — never harsh black) ========================================================================== */ --shadow-sm: 0 1px 2px rgba(27,33,38,.05), 0 1px 3px rgba(27,33,38,.04); /* cards at rest */ --shadow-md: 0 4px 14px rgba(27,33,38,.06), 0 2px 6px rgba(27,33,38,.04); /* hover / dropdowns */ --shadow-lg: 0 18px 48px rgba(27,33,38,.10), 0 6px 16px rgba(27,33,38,.05);/* modals / floating */ --shadow-blue: 0 1px 2px rgba(14,111,184,.30); /* primary button */ --ring-focus: 0 0 0 4px var(--blue-100); /* focus ring */ /* ========================================================================== 7 · LAYOUT ========================================================================== */ --container: 1120px; /* default content width (docs, text) */ --container-wide: 1280px; /* marketing / app shells */ --gutter: clamp(20px, 5vw, 64px); /* ========================================================================== 8 · MOTION ========================================================================== */ --ease: cubic-bezier(.4, 0, .2, 1); --dur-fast: .12s; --dur-base: .2s; --dur-slow: .3s; } /* ============================================================================ BASE (optional reset + sensible defaults — safe to keep or drop) ============================================================================ */ * { box-sizing: border-box; } html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } body { margin: 0; font-family: var(--font-body); color: var(--ink); background: var(--paper); line-height: 1.6; font-size: var(--t-body); } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: var(--fw-semibold); line-height: 1.1; letter-spacing: -.02em; margin: 0; } p { margin: 0; } a { color: inherit; } /* Tabular figures for all data / prices / counts */ .tnum, table td, .num { font-variant-numeric: tabular-nums; } ::selection { background: var(--blue-100); }