/* EMIO MÈR design tokens: Shir's look "ab" (her pick, 26–27.10): style a's colours, shapes and layout (אבן, stone)
   with style b's type, and her font 4 for the English product names. The other drafts (b, c) and their pickers were
   removed in WP1; the layouts keep html[data-style="a"][data-fonts="b"] so site.css applies as it always did.
   Colours, fonts, weights, radii and spacing come from here; site.css holds the layout.
   Fonts are self-hosted (tools/self-host-fonts.mjs): the CSP allows only our own origin. */

:root,
[data-style="a"] {
  --bg: #E6E2DC;
  --ink: #2E2C29;
  --muted: #68635D;             /* 4.6:1 on --bg, 5.1:1 on --panel (qa, 25.10) */
  --line: #C9C2B8;
  --photo: #DAD6D0;             /* behind photos while they load */
  --panel: #F1EEEA;             /* featured product, cart summary */
  --surface: #F1EEEA;           /* inputs, drawer */
  --on-photo: #FFFFFF;          /* text over photos */
  --ftr-bg: var(--bg);
  --ftr-ink: var(--ink);
  --ftr-muted: var(--muted);
  --bnav-bg: #FFFFFF;
  --draft-bg: var(--ink);
  --draft-ink: var(--bg);
  --focus: #8A6D3B;
  --danger: #A3281F;
  --scrim: rgba(28, 26, 23, .45);
  --shadow: 0 10px 30px rgba(0, 0, 0, .18);
  --swatch-edge: rgba(0, 0, 0, .15);

  /* B's type (Shir, 26.10). The product names in English: Cormorant Garamond in spaced capitals, a little larger
     (her pick on /fonts, 27.10; --k-name scales them in site.css). */
  --f-mark: 'Jost', system-ui, sans-serif;     /* the wordmark */
  --f-name: 'Cormorant Garamond', Georgia, serif; /* product names (Latin) */
  --k-name: 1.16;
  --f-head: 'Heebo', system-ui, sans-serif;    /* headings */
  --f-body: 'Heebo', system-ui, sans-serif;
  --fw-body: 300;
  --fw-head: 300;
  --fw-strong: 600;
  --ls-mark: .3em;
  --ls-name: .08em;
  --tt-name: uppercase;                        /* text-transform of product names */

  --r-btn: 0;
  --r-chip: 999px;
  --r-card: 0;
  --r-input: 0;
  --r-img: 0;

  --fs-xs: .8125rem;
  --fs-sm: .9375rem;
  --fs-md: 1.0625rem;
  --fs-lg: 1.375rem;
  --fs-title: clamp(1.75rem, 1.3rem + 2vw, 2.5rem);

  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 72px;
  --gutter: 16px;
  --maxw: 1320px;
  --tap: 44px;
  --hdr-h: 64px;

  --e: cubic-bezier(.16, 1, .3, 1);            /* entrances */
  --e-in: cubic-bezier(.5, 0, .75, 0);         /* exits */
  --e-out-q: cubic-bezier(.55, .085, .68, .53); /* quick closings (menu, drawer) */
  --spring: cubic-bezier(.34, 1.56, .64, 1);
}



@media (min-width: 900px) {
  :root { --gutter: 32px; }
}