/* Mtepe design tokens — the one definition of every colour, size and space.

   The site loads this before mtepe.css, and the brand templates in
   assets/templates load it too, so a colour changed here changes the shop,
   the admin and every exported image together (Brand & Asset Spec §4).
   Values are the design system's; where this file and a document disagree,
   the design system wins and the document is corrected.

   Contrast notes for the pairs people reach for:
     --accent is non-text only (3.3:1 on --bg, 2.6:1 on --brand).
     --accent-ink is the ochre for words: 5.5:1 on --bg.
     --text-soft is muted text below 14px or on --surface-sunk. */

:root {
  /* brand — admin chrome, fixed */
  --ink: #0e2a2a;
  --brand: #0f4c46;
  --brand-hi: #12655c;
  --brand-lo: #0a3a35;
  --brand-wash: #e8efec;
  --accent: #b9761f;        /* non-text only: nav underline, focus ring */
  --accent-ink: #8a5406;    /* accent-coloured TEXT — 5.5:1 on --bg */
  --accent-wash: #fbf0dc;

  /* surfaces + ink */
  --bg: #f6f2ea;
  --surface: #fff;
  --surface-sunk: #efebe2;
  --text: #1b2624;
  --text-muted: #5e6b68;
  --text-soft: #4a554f;     /* muted text below 14px, or on --surface-sunk */
  --line: #e4ded3;
  --line-strong: #cfc6b6;

  /* semantic + wash pairs */
  --ok: #1f6f4a;      --ok-ink: #1a5e3e;     --ok-wash: #e7f1ec;     --ok-line: #cfe2d8;
  --warn: #8a5a06;    --warn-ink: #7a4f05;   --warn-wash: #fbf0dc;   --warn-line: #e8d5ab;
  --danger: #a32e2e;  --danger-ink: #96291f; --danger-wash: #fbe7e4; --danger-line: #e7c3bc;
  --info: #2c4a52;    --info-ink: #26424a;   --info-wash: #e9eff1;   --info-line: #cfdce0;
  --neutral: #565f5c; --neutral-wash: #efede8; --neutral-line: #dfdacf;

  /* storefront: seller-chosen, three lines overridden per store */
  --store-accent: #0f4c46;
  --store-accent-ink: #fff;
  --store-accent-wash: #e8efec;

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --fs-xs: .75rem; --fs-sm: .875rem; --fs-md: 1rem; --fs-lg: 1.125rem;
  --fs-xl: 1.25rem; --fs-2xl: 1.375rem; --fs-3xl: 1.75rem;
  --lh-tight: 1.25; --lh-body: 1.55;

  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px;
  --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-pill: 999px;
  --shadow-1: 0 1px 2px rgb(14 42 42 / 6%), 0 6px 16px rgb(14 42 42 / 7%);
  --shadow-sticky: 0 -1px 0 var(--line), 0 -8px 20px rgb(14 42 42 / 6%);
  --tap: 44px;              /* the smallest target a thumb hits reliably */
  --measure: 34rem;
}