/**
 * Design tokens — single source of truth.
 * Lifted 1:1 from design/domov.html :root, then formalized with a spacing/type
 * scale and the recurring dark-footer palette so components never hardcode them.
 */
:root {
  /* ---- Brand / surface primitives (verbatim from the design) ---- */
  --teal: #0e5551;
  --teal-600: #0c4946;
  --teal-50: #eef5f4;
  --ink: #1c2624;
  --muted: #6b7975;
  --line: #e6eae9;
  --line-soft: #eef1f0;
  --bg: #ffffff;
  --green: #6cbf3f;          /* logo / eco accent */
  --green-600: #5aa832;
  --accent: #f0a500;         /* used sparingly */

  /* Mega menu badge palette. Kept separate from --accent/--green because the
     Wooptima minicart re-defines those on :root after this file loads. */
  --tag-green: #6cbf3f;
  --tag-amber: #f0a500;
  --tag-teal: #0e5551;
  --tag-red: #d64545;

  /* Eco leaf glyph used as a bullet / faint wallpaper. */
  --leaf-green: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236cbf3f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19 2c1 2 2 4.18 2 8 0 5.5-4.78 10-10 10z'/%3E%3Cpath d='M2 21c0-3 1.85-5.36 5.08-6'/%3E%3C/svg%3E");

  /* ---- Dark footer / feature-strip palette ---- */
  --dark-1: #0a201e;         /* site footer bg */
  --dark-2: #0d2826;         /* feature strip bg */
  --dark-3: #0a3f3b;         /* hero gradient tail */
  --dark-text: #b9cbc8;      /* footer body text */
  --dark-text-soft: #9fb4b1; /* footer muted text */

  /* Page background (body). */
  --page-bg: #fafbfb;

  /* ---- Radius ---- */
  --radius: 10px;            /* base card radius (design) */
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 16px;
  --radius-pill: 999px;

  /* ---- Layout ---- */
  --maxw: 1300px;
  --container: var(--maxw);

  /* ---- Typography ---- */
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* ---- Spacing scale (design rhythm) ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 18px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 42px;
  --space-9: 52px;

  /* ---- Shadows ---- */
  --shadow-card: 0 14px 34px -16px rgba(14, 85, 81, .28);
  --shadow-pop: 0 26px 50px -28px rgba(14, 85, 81, .4);

  /* ---- Single-product page accents (from miska-450ml-layout) ---- */
  --stock-green: #1c7c4a;    /* "Skladom" pill text */
  --stock-dot: #22a05c;      /* "Skladom" pill dot */
  --green-700: #4e9329;      /* solid green button hover */
  --save-text: #9a6700;      /* "ušetríte" savings text */
  --save-bg: #fff6e0;        /* "ušetríte" savings chip bg */
  --ink-soft: #33403d;       /* tab body copy */
  --ink-soft-2: #3a4744;     /* description teaser copy */
  --line-hover: #c7d3d1;     /* variant card hover border */
  --radio-border: #c2cdcb;   /* unselected radio ring */
  --teal-line: #cfe3e0;      /* wholesale-active card border */

  /* Star-rating widgets. Own tokens on purpose: components/minicart.css
   * re-points --accent at --green on :root for the React drawer, so a star
   * built on var(--accent) renders green. */
  --star-on: #f0a500;        /* earned / hovered star */
  --star-off: #d3dbda;       /* remaining star */

  /* ---- Sticky chrome that overlays the page, measured live by header.js ----
   * --admin-h:  WP admin bar, only while it is fixed (0 for logged-out/mobile).
   * --hdr-h:    the sticky header bar.
   * --subnav-h: an in-page nav pinned under the header (eko pill bar); 0 if none.
   * The values below are the fallbacks used before/without JS. */
  --admin-h: 0px;
  --hdr-h: 89px;
  --subnav-h: 0px;

  /* Where sticky sidebars pin, and where in-page #targets land: below
   * everything that covers the viewport top, plus breathing room. */
  --sticky-top: calc(var(--admin-h) + var(--hdr-h));
  --anchor-offset: calc(var(--sticky-top) + var(--subnav-h) + 16px);

  /* ---- Ekomateriály page accents ---- */
  --ink-soft-3: #46544f;     /* long-form body copy */
  --teal-line-soft: #d4e6e3; /* eco callout border */
  --teal-text-soft: #d6e6e3; /* copy on a teal CTA band */
  --chip-bg: #f1f5f4;        /* inactive pill (mobile anchor nav) */
  --cmp-good-bg: #f3faf5;    /* comparison — compostable column */
  --cmp-good-line: #bfe0cb;
  --cmp-good-chip: #dff0e4;  /* its badge + ✓ bullet */
  --cmp-bad-bg: #fafafa;     /* comparison — uncertified column */
  --cmp-bad-chip: #eceeed;   /* its badge + ✕ bullet */
  --cmp-bad-mark: #8a9794;   /* ✕ glyph */
  --overlay-white-12: rgba(255, 255, 255, .12); /* ghost button on teal — hover */
  --overlay-white-40: rgba(255, 255, 255, .4);  /* ghost button on teal — border */
  --bar-bg: rgba(255, 255, 255, .96);           /* translucent sticky mobile bar */
  --shadow-bar: 0 8px 16px -10px rgba(0, 0, 0, .22);

  /* ---- Feedback / destructive (account errors, logout) ---- */
  --danger: #b3261e;         /* error / destructive text + accents */
  --danger-bg: #fbecec;      /* error / destructive hover surface */
}

/* ---- Chakra UI font override (Wooptima widgets) ----
 *
 * The Wooptima plugin boots React widgets (minicart, product area) on Chakra UI.
 * Chakra injects a :root rule at RUNTIME defining --chakra-fonts-* as
 * "Rubik, sans-serif" and its reset applies that to <body>, so it overrode this
 * theme's font on every page. Rubik is never loaded anywhere on this site — no
 * @font-face, no Google Fonts request — so the page silently fell through to the
 * generic sans-serif, and because the swap lands after the stylesheet has already
 * painted --font-body, every line of text reflowed once the JS ran.
 *
 * Pointing Chakra's own variables back at our stack fixes both halves: one font
 * for the whole page, and nothing left to swap after first paint. Verified with
 * JS disabled (theme stack) vs enabled (was Rubik).
 *
 * The selector is doubled on purpose — :root:root is (0,2,0) and beats the
 * (0,1,0) rule Chakra injects later, so this does not depend on load order.
 */
:root:root {
  --chakra-fonts-body: var(--font-body);
  --chakra-fonts-heading: var(--font-body);
}