/* Pekara ODRA — design tokens (single source of truth). Served at /css/theme.css.
   Every template links this instead of redefining :root, so palette, type scale and
   spacing rhythm can't drift between pages.

   v2 "neighbourhood-deli" system: warm white canvas, terracotta accent, oat panels,
   near-black ink, espresso dark bands. Bricolage Grotesque (display) + Hanken Grotesk (body).

   RED HANDLING (accessibility):
     --accent (#C0492E "Topla cigla") is a FILL / CTA colour only. White-on-accent is fine for
     large/bold button labels, but #C0492E as a *text* colour on --bg fails AA. For red TEXT /
     LINKS on light use --link (#A33B23, ~5.4:1 on --bg).
   Admin order-status pills keep darkened text on a light tint (each clears AA on its tint). */

:root {
  /* ===================== v2 design tokens ===================== */

  /* surfaces */
  --bg: #FBF8F1;             /* page background (warm white) */
  --oat: #F1EADB;            /* alternating "oat" section / card background */
  --surf: #FCFAF4;           /* faint warm wash */
  --surface-2: #FFFFFF;      /* clean white card / input surface on --bg */
  --placeholder: #EFE7D6;    /* image-placeholder fill on --bg */
  --placeholder-oat: #E4D9C2;/* image-placeholder fill on --oat */
  --dark: #241C16;           /* espresso dark surface — section bands, confirmation card (NOT text; --ink stays for type) */

  /* text */
  --ink: #1B1A17;            /* primary text; primary-on-light buttons (stays near-black even as dark bands warm) */
  --ink-soft: #6B6458;       /* body / secondary text (AA ~4.95:1 on --bg) */
  --muted: #9A917F;          /* tertiary text, captions, counts */
  --whisper: #C8BFA9;        /* faded decorative type on --bg (homepage marquee) — intentionally sub-AA, aria-hidden only */
  --nav-link: #413D34;       /* nav link text */
  --story-ink: #3A352C;      /* story prose body */

  /* on dark (#241C16) sections */
  --on-dark: #FBF8F1;
  --on-dark-soft: #B3AA99;
  --on-dark-2: #CFC7B6;
  --on-dark-label: #8C8472;

  /* brand red — two roles (Topla cigla terracotta) */
  --accent: #C0492E;         /* terracotta — FILLS / CTAs / active nav / markers (NOT small text) */
  --accent-amber: #E0A93C;   /* amber — only on the dark order-CTA band (kicker + arrows) */
  --link: #A33B23;           /* red TEXT / links on light (AA ~5.4:1 on --bg) */
  --accent-tint: rgba(192,73,46,.10);  /* soft terracotta wash: chips, hovers */
  --accent-line: rgba(192,73,46,.24);  /* subtle terracotta hairline / ring */

  /* status (open / closed, success, error) */
  --ok: #1F8A5B;             /* "Otvoreno" dot + accent */
  --ok-text: #1B7A50;        /* green text that clears AA on light (~5:1 on --bg) */
  --ok-tint: #E4F0E8;
  --bad: #B14A39;            /* "Zatvoreno" / form-error text (AA ~5:1) + dot */
  --bad-tint: #F3E9E6;

  /* hairlines — rgba(27,26,23, alpha) */
  --line: rgba(27,26,23,.12);
  --line-soft: rgba(27,26,23,.07);
  --line-2: rgba(27,26,23,.10);
  --line-strong: rgba(27,26,23,.20);

  /* radii */
  --radius: 18px;
  --radius-sm: 12px;         /* inputs / textareas */
  --radius-lg: 22px;         /* cards / panels / image frames */
  --radius-chip: 14px;       /* small date chips */
  --radius-pill: 100px;

  /* shadows + focus rings (ink-tinted) */
  --shadow-sm: 0 4px 14px -8px rgba(27,26,23,.16);
  --shadow: 0 14px 40px rgba(27,26,23,.12);
  --shadow-lg: 0 30px 60px -24px rgba(27,26,23,.22);
  --shadow-card: 0 14px 40px rgba(27,26,23,.14);   /* floating "Otvoreno sada" hero card */
  --ring: 0 0 0 4px rgba(192,73,46,.16);
  --ring-lg: 0 0 0 6px rgba(192,73,46,.22);

  /* layout + rhythm */
  --maxw: 1280px;            /* marketing pages */
  --maxw-order: 1180px;      /* order + contact */
  --maxw-prose: 760px;       /* story prose */
  --section-y: clamp(80px, 9vw, 140px);
  --gutter: clamp(22px, 4vw, 36px);
  --tracking-kicker: .16em;

  /* motion — one signature ease-out + the two durations reused across rules/files.
     One-off tuned durations (entrances, the line-draw, carousel) stay inline on purpose;
     only cross-referenced values are tokenised, so the motion language can't drift. */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur-hover: .18s;    /* hover micro-interactions: buttons, cards, nav */
  --dur-reveal: .7s;    /* scroll-reveal fade / rise */

  /* type */
  --font-display: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
  --t-xs: clamp(11px, .35vw + 9.6px, 12.5px);
  --t-base: clamp(15px, .3vw + 14.4px, 17px);
  --t-md: clamp(16.5px, .6vw + 15px, 19px);
  --t-2xl: clamp(28px, 4vw + 12px, 52px);   /* section H2 */
  --t-4xl: clamp(40px, 5.6vw + 14px, 80px); /* inner-page H1 */
  --t-hero: clamp(46px, 6.4vw + 14px, 90px);/* landing hero H1 */

  /* image-slot placeholder (striped, reads as intentional, not a broken img) */
  --slot-surface: repeating-linear-gradient(45deg, #EFE7D6, #EFE7D6 9px, #E7DCC6 9px, #E7DCC6 18px);
  --slot-ring: inset 0 0 0 1px rgba(27,26,23,.10);

  /* ============ legacy aliases (old token names -> v2 values) ============
     The redesigned pages use the v2 names above. These keep the not-yet-rebuilt pages
     (admin, login, privatnost, coming-soon) working and recoloured to the new palette
     without a rewrite. Retire each as its page migrates. */
  --cream: var(--bg);
  --cream-3: var(--oat);
  --panel: var(--dark);           /* legacy dark bar / circle -> espresso */
  --panel-2: #2A2620;
  --gold: #CDA13C;                /* mid amber — decorative borders / accents on light */
  --gold-lt: var(--accent-amber); /* bright amber — on the dark admin bar */
  --gold-soft: rgba(224,169,60,.42);
  --gold-wash: rgba(224,169,60,.12);
  --olive: var(--ok);
  --olive-tint: var(--ok-tint);
  --brick: var(--accent);         /* fill role */
  --brickd: var(--link);          /* AA red text role */
  --brick-tint: var(--accent-tint);
  --brick-line: var(--accent-line);

  /* admin order-status pills — darkened text on tint, each AA on its own tint */
  --nova: var(--link);        --nova-bg: rgba(192,73,46,.12);     /* nova = new */
  --spremno: #1B6B47;         --spremno-bg: rgba(31,138,91,.14);  /* spremno = ready */
  --preuzeto: #6F5410;        --preuzeto-bg: rgba(224,169,60,.16);/* preuzeto = picked up */
  --otkazano: #5C5648;        --otkazano-bg: rgba(27,26,23,.08);  /* otkazano = cancelled */
}