/* ============================================================
   Masterfish storefront — design TOKEN CONTRACT (--mf-*).
   "Design F" (docs/design-reference-storefront) — locked visual system.

   Ink #151617 on white · Noto Sans + Noto Sans Mono · ONE muted teal accent.
   Data-first: hairline rows, tabular figures, monospace for codes/prices/qty.
   Colour carries function (status families), never decoration. Light only — no dark mode.

   CONVENTIONS.md §3.6: components are Shadow DOM (oboustranná izolace). The ONLY thing that
   crosses the shadow boundary is CSS custom properties, so all theming enters the components as
   `--mf-*` variables declared on :root by the HOST (WordPress in prod, the dev harness here).
   Components read them with a hardcoded fallback, so they still look correct inside an arbitrary
   WP theme that provides none. This file is what the host loads; the WP plugin (řez 8d) will emit
   the equivalent :root block. The reference's `--ink/--accent/...` names are re-expressed here under
   the `--mf-*` prefix the components already consume (one contract, not two).
   ============================================================ */
:root {
  /* ── Type ──────────────────────────────────────────────────────────────── */
  /* Noto Sans covers full CZ/EN/IT diacritics; Noto Sans Mono for data the buyer scans.
     The host (dev harness index.html / WP plugin) is responsible for actually loading the
     web fonts; the system-ui fallbacks keep components legible if it doesn't. */
  --mf-font-sans: 'Noto Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mf-font-mono: 'Noto Sans Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ── Ink scale (from brand #151617) — text & strong surfaces ─────────────── */
  --mf-color-text: #151617; /* ink — body text, primary action bg */
  --mf-color-ink-strong: #000000; /* ink-button hover */
  --mf-color-ink-2: #494c4f; /* secondary text / field labels */
  --mf-color-ink-3: #797d81; /* Design F "Ink 3" swatch — decorative/meta only (4.15:1 on white) */
  --mf-color-ink-4: #a9acaf; /* faint — placeholders / disabled glyphs ONLY (never readable text) */
  /* Readable secondary text (breadcrumbs, hints, sublabels, meta, reverse-charge). Nudged darker than
     the reference's Ink 3 #797d81 to clear WCAG AA 4.5:1 — #65696d is 5.5:1 on white AND >=4.8:1 on the
     light tints muted text also sits on (surface-3 #efefec, accent-soft #e9f1f2, nd-soft #f7efdd), so it
     stays AA everywhere without per-element exceptions. A near-imperceptible, deliberate deviation from
     Design F for accessibility (flagged for owner). */
  --mf-color-text-muted: #65696d;

  /* ── Surfaces ─────────────────────────────────────────────────────────────── */
  --mf-color-surface: #ffffff;
  --mf-color-surface-alt: #f6f6f4; /* surface-2 — hover rows / quiet fills */
  --mf-color-surface-3: #efefec; /* surface-3 — deeper fill */

  /* ── Hairlines (elevation comes from lines, not shadows) ──────────────────── */
  --mf-color-line: rgba(21, 22, 23, 0.09); /* row separators */
  --mf-color-border: rgba(21, 22, 23, 0.16); /* line-2 — default control/card border (alias) */
  --mf-color-line-2: rgba(21, 22, 23, 0.16);
  --mf-color-line-3: rgba(21, 22, 23, 0.28);
  --mf-color-border-strong: rgba(21, 22, 23, 0.28); /* = line-3 (consumed by some 8c fields) */

  /* ── Accent = ONE muted teal (links / active state / focus / "Do košíku") ─── */
  --mf-color-accent: #1f6b75;
  --mf-color-accent-fg: #ffffff;
  --mf-color-accent-hover: #155059; /* accent-press */
  --mf-color-accent-press: #155059;
  --mf-color-accent-soft: #e9f1f2;
  --mf-color-accent-line: rgba(31, 107, 117, 0.3);
  --mf-color-accent-ring: rgba(31, 107, 117, 0.2); /* focus ring */

  /* ── Status families — base · soft · line (semantics only, never decoration) ─ */
  /* OK / success */
  --mf-color-success: #1f7a4d;
  --mf-color-success-soft: #e6f2ea;
  --mf-color-success-line: rgba(31, 122, 77, 0.3);
  /* ND / unavailable / non-blocking warning = AMBER (distinct from danger red).
     Text nudged a touch darker than the reference's #8a6a24 so amber-on-amber-soft clears WCAG AA
     4.5:1 (#806123 = 5.0:1 on #f7efdd); the soft bg + hairline keep the Design F values. */
  --mf-color-nd: #806123;
  --mf-color-nd-soft: #f7efdd;
  --mf-color-nd-line: rgba(138, 106, 36, 0.34);
  --mf-color-warning-text: #806123; /* = nd base (alias the 8c screens consume) */
  --mf-color-warning-bg: #f7efdd; /* = nd soft (alias) */
  --mf-color-warning-line: rgba(138, 106, 36, 0.34);
  /* DANGER / error */
  --mf-color-danger: #b3271c;
  --mf-color-danger-bg: #fbeae8; /* danger-soft */
  --mf-color-danger-line: rgba(179, 39, 28, 0.32);
  /* (Design F's indigo "window" family was for order windows, which B25 removed — not defined here.) */

  /* ── Cart badge — monochrome ink (Design F: colour = function; a cart count is not "danger") ── */
  --mf-color-badge-bg: #151617;
  --mf-color-badge-fg: #ffffff;

  /* ── Shape — tight radii ──────────────────────────────────────────────────── */
  --mf-radius-sm: 5px; /* r-xs */
  --mf-radius-md: 7px; /* r */
  --mf-radius-lg: 11px; /* r-lg */
  --mf-radius-pill: 999px;

  /* ── Elevation — only for floating layers (menu / toast / dialog) ─────────── */
  --mf-shadow-1: 0 1px 2px rgba(21, 22, 23, 0.05);
  --mf-shadow-2: 0 10px 30px rgba(21, 22, 23, 0.1);
  --mf-shadow-popover: 0 14px 40px rgba(21, 22, 23, 0.14);

  /* ── Layout ───────────────────────────────────────────────────────────────── */
  --mf-maxw: 1000px;
}