/* Matjari design tokens — v0.2 "غسق" system.
   Brand colours + font pair arrive from config as --m-primary/--m-accent/
   --m-bg/--m-text + --m-font-display/--m-font-text. Everything else is
   derived here so ANY brand's four colours produce a coherent system. */

:root {
  /* Derived surfaces & lines (DS-17).
     Alpha-derived tokens compose rgba() from the --m-*-rgb triplets the
     theme prints per store in #matjari-vars — exact on any var()-capable
     WebView, no color-mix involved. The OPAQUE derived tokens need real
     channel math: the printed block carries per-store statics for them,
     and the @supports layer at the end of this file re-declares them
     with live color-mix for modern browsers. */
  --m-line:         rgba(var(--m-text-rgb), .12);
  --m-line-strong:  rgba(var(--m-text-rgb), .24);
  --m-on-primary:   #fff;
  --m-success-bg:   #e3f0e8; --m-success-ink: #1d6b43; --m-success-line: #bbddc9;
  --m-danger-bg:    #f7e0e0; --m-danger-ink:  #8a1c1c;
  --m-wish:         #c2402e; /* wishlist heart — its own red, not danger */

  /* Rating stars (§3.3b). Their own gold, not --m-accent: a per-store accent
     can be any hue, and a magenta star does not read as a rating anywhere.
     --m-star-off composes an alpha the DS-17 way (rgba over a printed
     triplet), never color-mix. The mask path is BYTE-IDENTICAL to
     matjari_icon('star') and matjari_dash_icon('star'), so the fleet has one
     star geometry: outlined in sections, filled in ratings. */
  --m-star:      #e0a325;
  --m-star-off:  rgba(var(--m-text-rgb), .20);
  --m-star-size: 15px;
  --m-star-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 3.5l2.5 5.2 5.7.7-4.2 3.9 1.1 5.6L12 16.2 6.9 18.9 8 13.3 3.8 9.4l5.7-.7z'/%3E%3C/svg%3E");

  /* WhatsApp greens — one family for every surface (PL-28).
     --m-wa is for icons/borders/washes only; a BUTTON with white text
     uses --m-wa-deep (5.4:1) — bright-on-white failed contrast. */
  --m-wa:      #1faa53;
  --m-wa-deep: #157a3c;
  --m-wa-wash: #f0faf3;
  --m-wa-shadow: 0 10px 24px -8px rgba(21,122,60,.5); /* --m-wa-deep at 50% */

  /* Type — Arabic-first scale. Display tight, body airy.
     base = 1.0625rem: the 17px the body ALWAYS was (rem resolves against
     the browser's 16px root, so 1rem rendered 16px inside a 17px flow —
     the drift that sent refine.css chasing px. DS-6). */
  --m-fs-2xs:  0.6875rem;  /* 11px — count badges */
  --m-fs-xs:   0.8125rem;
  --m-fs-sm:   0.875rem;   /* 14px — the old 13.5/14/14.5px cluster */
  --m-fs-s:    0.9375rem;
  --m-fs-base: 1.0625rem;
  --m-fs-m:    1.125rem;
  --m-fs-l:    1.4rem;
  --m-fs-xl:   1.85rem;
  --m-fs-xxl:  clamp(2.1rem, 7vw, 3rem);
  --m-lh-tight: 1.3;
  --m-lh-base:  1.8;

  /* Space & shape */
  --m-sp-1: 4px;  --m-sp-2: 8px;  --m-sp-3: 12px; --m-sp-4: 16px;
  --m-sp-5: 24px; --m-sp-6: 36px; --m-sp-7: 56px; --m-sp-8: 84px;
  --m-r-s: 8px; --m-r: 13px; --m-r-l: 18px; --m-r-pill: 999px;
  --m-shadow-s: 0 2px 10px -4px rgba(var(--m-text-rgb), .22);
  --m-shadow:   0 14px 38px -20px rgba(var(--m-text-rgb), .45);
  --m-ring:     0 0 0 1px var(--m-line);

  /* Motion — three speeds, two curves. Nothing gets an ad-hoc duration. */
  --m-t-fast: 120ms;   /* pressed / hover feedback */
  --m-t-base: 240ms;   /* entrances, drawers, reveals */
  --m-t-slow: 480ms;   /* celebratory pops, count bumps */
  --m-ease: cubic-bezier(.22, .68, .32, 1);
  --m-ease-exit: cubic-bezier(.55, .06, .68, .19);

  --m-container: 1200px;
  --m-touch: 44px;

  /* Header geometry (§3.2). One set of tokens; a variant re-points a token on
     its body class rather than adding a rule. That is not style: scoping the
     override on `body` is what lets ONE declaration reach both the nav's own
     min-height and the sticky panels that have to clear it. An element-level
     override would fix the header and leave the cart totals underneath it. */
  --m-header-h:     64px;  /* the nav row at rest */
  --m-header-h-sm:  56px;  /* the same row once .is-scrolled compacts it */
  --m-header-row:   0px;   /* a variant's second links row, where it has one */
  --m-header-top:   0px;   /* what the header itself is pushed down by (admin bar) */
  --m-header-gap:   var(--m-sp-5);
  --m-header-clear: calc(var(--m-header-top) + var(--m-header-h) + var(--m-header-row) + var(--m-header-gap));

  /* The bottom sticky bar, and the clearance the WhatsApp FAB needs from it.
     73px is sp-3 twice + the 48px button + the 1px top border, so the token
     and the rendered box cannot drift; .m-sticky pins itself to it. The FAB
     clearance was a bare 86px that happened to clear a 73px bar. */
  --m-sticky-h: 73px;
  --m-fabclear: calc(var(--m-sticky-h) + var(--m-sp-3));
}

/* Modern browsers re-derive the OPAQUE tokens live; pre-color-mix
   WebViews keep the identical per-store statics from #matjari-vars
   (printed earlier in the document, so this layer wins where it can).
   Percentages mirror matjari_print_css_vars() — keep in lockstep. */
@supports (color: color-mix(in srgb, red 50%, red)) {
  :root {
    --m-surface:      color-mix(in srgb, var(--m-bg) 96%, var(--m-text) 4%);
    --m-surface-2:    color-mix(in srgb, var(--m-bg) 94%, var(--m-text) 6%); /* neutral — accent tinting made every surface read "boutique" */
    --m-muted:        color-mix(in srgb, var(--m-text) 66%, var(--m-bg) 34%); /* 66% = min passing 4.5:1 on all skins */
    --m-primary-soft: color-mix(in srgb, var(--m-primary) 10%, var(--m-bg) 90%);
    --m-accent-wash:  color-mix(in srgb, var(--m-accent) 26%, var(--m-bg) 74%);
  }
}