/* Nakřečkuj — generated from tokens.json */
@font-face { font-family: DynaPuff; src: url(fonts/DynaPuff.woff2) format('woff2'); font-weight: 400 700; font-display: swap; }
@font-face { font-family: Figtree; src: url(fonts/Figtree.woff2) format('woff2'); font-weight: 300 900; font-display: swap; }
@font-face { font-family: Figtree; src: url(fonts/Figtree-Italic.woff2) format('woff2'); font-weight: 300 900; font-style: italic; font-display: swap; }
:root {
  --surface: #FFF7EA;
  --surface-card: #FFFFFF;
  --line: #EADBC4;
  --ink: #3A2516;
  --ink-muted: #75604E;
  --brand-orange: #F08A24;
  --brand-orange-tint: #FFE7CC;
  --brand-orange-deep: #9E4C0A;
  --green: #2E7A3A;
  --green-deep: #1F5A29;
  --green-tint: #E2F1DC;
  --deal-red: #D2361F;
  --cheek-pink: #F7B6A8;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 28px;
  --radius-pill: 999px;
  --shadow-card: 0 1px 0 #EADBC4, 0 6px 18px rgba(58, 37, 22, 0.08);
  --shadow-pop: 0 3px 0 #1F5A29;
  --font-display: DynaPuff, "Baloo 2", "Trebuchet MS", system-ui, sans-serif;
  --font-text: Figtree, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.logo { font-family: var(--font-display); font-size: 48px; line-height: 1; font-weight: 700; letter-spacing: -0.01em; }
.title { font-family: var(--font-display); font-size: 30px; line-height: 36px; font-weight: 600; }
.heading { font-family: var(--font-display); font-size: 21px; line-height: 28px; font-weight: 600; }
.body { font-family: var(--font-text); font-size: 16px; line-height: 24px; font-weight: 400; }
.label { font-family: var(--font-text); font-size: 13px; line-height: 18px; font-weight: 650; letter-spacing: 0.02em; }
.price { font-family: var(--font-text); font-size: 24px; line-height: 28px; font-weight: 800; font-variant-numeric: tabular-nums; }
.caption { font-family: var(--font-text); font-size: 13px; line-height: 18px; font-weight: 400; }

/* Nakřečkuj components. Every value comes from tokens.css; nothing here redefines a token. */
body { margin: 0; font-family: var(--font-text); background: var(--surface); color: var(--ink); -webkit-font-smoothing: antialiased; }
.nk-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; padding: var(--space-4); }
.nk-stack { display: grid; gap: var(--space-3); padding: var(--space-4); max-width: 420px; }

/* Button */
.nk-btn { font-family: var(--font-text); font-weight: 700; font-size: 16px; line-height: 20px; border-radius: var(--radius-md); border: 2px solid transparent; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); transition: transform .08s, box-shadow .08s, background-color .12s; }
.nk-btn-md { min-height: 48px; padding: 0 var(--space-6); }
.nk-btn-sm { min-height: 36px; padding: 0 var(--space-4); font-size: 14px; border-radius: var(--radius-sm); }
.nk-btn-block { display: flex; width: 100%; }
.nk-btn-primary { background: var(--green); color: var(--surface-card); box-shadow: var(--shadow-pop); }
.nk-btn-primary:hover { background: var(--green-deep); }
.nk-btn-primary:active { transform: translateY(3px); box-shadow: none; }
.nk-btn-secondary { background: var(--surface-card); color: var(--ink); border-color: var(--ink-muted); }
.nk-btn-secondary:hover { background: var(--brand-orange-tint); }
.nk-btn-text { background: transparent; color: var(--green); padding-left: var(--space-2); padding-right: var(--space-2); text-decoration: underline; text-underline-offset: 3px; }
.nk-btn:disabled { background: var(--line); color: var(--ink-muted); border-color: transparent; box-shadow: none; cursor: not-allowed; transform: none; }
.nk-btn:focus-visible, .nk-chip:focus-visible, .nk-day:focus-visible, .nk-item-check:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; }

/* Price */
.nk-price { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-1) var(--space-2); font-variant-numeric: tabular-nums; }
.nk-price-now { font-weight: 800; font-size: 18px; line-height: 24px; color: var(--ink); }
.nk-price-lg .nk-price-now { font-size: 24px; line-height: 28px; }
.nk-price-deal .nk-price-now { background: var(--deal-red); color: var(--surface-card); border-radius: var(--radius-pill); padding: 0 var(--space-2); }
.nk-price-was { font-size: 13px; line-height: 18px; color: var(--ink-muted); text-decoration: line-through; }
.nk-price-off { font-size: 13px; line-height: 18px; font-weight: 700; color: var(--deal-red); }
.nk-price-unit { font-size: 13px; line-height: 18px; color: var(--ink-muted); }

/* StoreBadge */
.nk-store { display: inline-flex; align-items: center; gap: var(--space-2); border: 1.5px solid var(--ink-muted); border-radius: var(--radius-sm); padding: 2px var(--space-2); font-size: 13px; line-height: 18px; background: var(--surface-card); }
.nk-store-name { font-weight: 650; letter-spacing: .02em; text-transform: uppercase; color: var(--ink); }
.nk-store-until { color: var(--ink-muted); }

/* Chip */
.nk-chip { font-family: var(--font-text); font-size: 14px; line-height: 20px; font-weight: 600; min-height: 36px; padding: 0 var(--space-4); border-radius: var(--radius-pill); border: 1.5px solid var(--ink-muted); background: var(--surface-card); color: var(--ink); cursor: pointer; display: inline-flex; align-items: center; gap: var(--space-1); }
.nk-chip:hover { background: var(--brand-orange-tint); }
.nk-chip-like.nk-chip-on { background: var(--green-tint); border-color: var(--green); color: var(--green-deep); }
.nk-chip-avoid.nk-chip-on { background: var(--surface-card); border-color: var(--ink); color: var(--ink); }
.nk-chip-avoid.nk-chip-on .nk-chip-label { text-decoration: line-through; text-decoration-thickness: 2px; }
.nk-chip-mark { font-weight: 800; }
.nk-chip-avoid .nk-chip-mark { color: var(--deal-red); }

/* WeekStrip */
.nk-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--space-2); }
.nk-day { display: grid; justify-items: center; gap: 2px; padding: var(--space-2) 0; border-radius: var(--radius-md); border: 0; background: transparent; color: var(--ink); cursor: pointer; font-family: var(--font-text); }
.nk-day:hover { background: var(--brand-orange-tint); }
.nk-day-short { font-size: 13px; line-height: 18px; font-weight: 650; text-transform: uppercase; letter-spacing: .02em; color: var(--ink-muted); }
.nk-day-date { font-family: var(--font-display); font-size: 21px; line-height: 28px; font-weight: 600; }
.nk-day-dot { width: 6px; height: 6px; border-radius: 50%; background: transparent; }
.nk-day-dot-on { background: var(--green); }
.nk-day-on { background: var(--brand-orange); }
.nk-day-on:hover { background: var(--brand-orange); }
.nk-day-on .nk-day-short { color: var(--ink); }
.nk-day-on .nk-day-dot-on { background: var(--ink); }

/* MealCard */
.nk-meal { background: var(--surface-card); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); overflow: hidden; cursor: pointer; display: grid; }
.nk-meal-img { position: relative; aspect-ratio: 16 / 10; background: var(--brand-orange-tint); }
.nk-meal-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nk-meal-kind { position: absolute; left: var(--space-3); top: var(--space-3); background: var(--surface-card); color: var(--ink); border-radius: var(--radius-pill); padding: 2px var(--space-3); font-size: 13px; line-height: 18px; font-weight: 650; text-transform: uppercase; letter-spacing: .02em; }
.nk-meal-body { padding: var(--space-4); display: grid; gap: var(--space-2); }
.nk-meal-title { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 21px; line-height: 28px; text-wrap: balance; }
.nk-meal-facts { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.nk-meal-cost { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.nk-meal-tags { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.nk-tag { font-size: 13px; line-height: 18px; font-weight: 600; padding: 2px var(--space-2); border-radius: var(--radius-sm); background: var(--green-tint); color: var(--green-deep); }
.nk-tag-deal { background: var(--deal-red); color: var(--surface-card); }

/* ShoppingItem */
.nk-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); background: var(--surface-card); border-radius: var(--radius-md); cursor: pointer; }
.nk-item-check { appearance: none; -webkit-appearance: none; width: 24px; height: 24px; margin: 0; border: 2px solid var(--ink-muted); border-radius: 8px; background: var(--surface-card); display: grid; place-items: center; cursor: pointer; }
.nk-item-check:checked { background: var(--green); border-color: var(--green); }
.nk-item-check:checked::after { content: ""; width: 6px; height: 11px; border: solid var(--surface-card); border-width: 0 3px 3px 0; transform: translateY(-1px) rotate(45deg); }
.nk-item-main { display: grid; min-width: 0; }
.nk-item-name { font-weight: 600; font-size: 16px; line-height: 22px; overflow-wrap: anywhere; }
.nk-item-meta { font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.nk-item-done .nk-item-name { text-decoration: line-through; color: var(--ink-muted); }
.nk-item-done .nk-price { opacity: .55; }

/* HamikTip */
.nk-tip { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: end; gap: var(--space-2); }
.nk-tip-hamik { width: 96px; height: 96px; object-fit: contain; }
.nk-tip-bubble { position: relative; border-radius: var(--radius-lg); padding: var(--space-4); margin-bottom: var(--space-6); }
.nk-tip-bubble::before { content: ""; position: absolute; left: -8px; bottom: 18px; width: 18px; height: 18px; background: inherit; transform: rotate(45deg); border-radius: 3px; }
.nk-tip-tip .nk-tip-bubble { background: var(--brand-orange-tint); }
.nk-tip-savings .nk-tip-bubble { background: var(--green-tint); }
.nk-tip-title { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 18px; line-height: 24px; }
.nk-tip-amount { margin: 2px 0 0; font-family: var(--font-display); font-weight: 700; font-size: 34px; line-height: 38px; color: var(--green-deep); font-variant-numeric: tabular-nums; }
.nk-tip-text { margin: var(--space-1) 0 0; font-size: 15px; line-height: 22px; }

@media (prefers-reduced-motion: reduce) { .nk-btn { transition: none; } }