/* jidlo21 — design tokens (handoff DS-0005). Accent se přepisuje na per skupina. */ :root { /* neutrály — teplá světlá paleta */ --bg-app: #FAF8F3; --bg-surface: #FFFFFF; --bg-inset: #F2EDE4; --bg-inset-2: #FBF9F5; --hairline: #ECE7DE; --hairline-2: #F0EBE2; --border-strong: #E2DCD1; --border-dashed: #D8D2C8; --ink: #211F1B; --ink-2: #2b261d; --ink-secondary: #5f584c; --ink-muted: #7d766b; --ink-faint: #A89F92; /* accent — default Lesní zelená (override inline na ) */ --accent: #2F8F5E; --accent-soft: #E8F3EC; --accent-ink: #1E6B43; /* badge "Nové" */ --new-bg: #F8ECE5; --new-ink: #A4502F; /* radius / stíny / typo */ --r-card: 16px; --r-row: 13px; --r-pill: 9px; --shadow-phone: 0 8px 30px rgba(40, 34, 24, .10); --font-head: "Bricolage Grotesque", system-ui, -apple-system, sans-serif; --font-body: "Hanken Grotesk", system-ui, -apple-system, sans-serif; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: var(--font-body); color: var(--ink); background: var(--bg-app); line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; } h1, h2, h3 { font-family: var(--font-head); letter-spacing: -.02em; margin: 0; } /* sdílené primitivy */ .u-eyebrow { font: 700 11px/1 var(--font-body); text-transform: uppercase; letter-spacing: .055em; color: var(--ink-faint); } .u-muted { color: var(--ink-muted); } .u-faint { color: var(--ink-faint); } .price { font: 700 14px var(--font-body); color: var(--ink); white-space: nowrap; } /* alergeny */ .allergens { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 3px; } .allergen { font: 600 11px var(--font-body); color: var(--ink-muted); } .allergen-chip { display: inline-flex; align-items: center; gap: 4px; background: var(--bg-inset); color: var(--ink-secondary); border-radius: 7px; padding: 4px 8px; font: 600 12px var(--font-body); } /* pill / badge */ .pill { display: inline-flex; align-items: center; gap: 6px; background: var(--bg-inset); color: var(--ink-secondary); border-radius: var(--r-pill); padding: 6px 11px; font: 600 12px var(--font-body); } .pill-accent { background: var(--accent-soft); color: var(--accent-ink); } .badge-count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #C76B4C; color: #fff; font: 700 11px var(--font-body); } .badge-new { background: var(--new-bg); color: var(--new-ink); border-radius: 7px; padding: 3px 8px; font: 700 11px var(--font-body); } /* avatar */ .avatar { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; font: 700 13px var(--font-body); } /* tlačítka */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 13px; padding: 13px 18px; font: 700 14.5px var(--font-body); background: var(--bg-inset); color: var(--ink); } .btn-primary { background: var(--accent); color: #fff; } .btn-soft { background: var(--accent-soft); color: var(--accent-ink); } .btn-ghost { background: transparent; border: 1px solid var(--border-strong); color: var(--ink-secondary); } .btn-block { width: 100%; } /* card */ .card { background: var(--bg-surface); border: 1px solid var(--hairline); border-radius: var(--r-card); padding: 18px; }