/**
 * tokens.css — Jouman design tokens.
 *
 * The single source of truth for every colour, type, space and size value in the
 * theme. No other stylesheet may hardcode a colour, size or breakpoint; they all
 * consume the custom properties declared here.
 *
 * Values are transcribed verbatim from the shared build contract.
 */

:root {
  /* ---- colour: light (default) ---- */
  --jm-color-ground:      #F1F2EE; /* page background — pale stone, green bias */
  --jm-color-surface:     #FBFBF9; /* cards, product tiles */
  --jm-color-surface-2:   #E8EAE4; /* subtle fills, table headers */
  --jm-color-line:        #D6D9D1;
  --jm-color-line-soft:   #E3E6DE;

  --jm-color-ink:         #1F2A26; /* body text — deep pine, warmer than black */
  --jm-color-ink-2:       #45524C;
  --jm-color-muted:       #6B776F;

  --jm-color-accent:      #8C4A5C; /* dried mulberry — CTAs, price, links */
  --jm-color-accent-hover:#743D4C;
  --jm-color-accent-soft: #F0E4E7;
  --jm-color-on-accent:   #FBFBF9; /* text on accent fill */

  --jm-color-olive:       #6B7355; /* structural: rules, in-stock, spec bars */
  --jm-color-olive-soft:  #E7EADF;
  --jm-color-gold:        #A8834F; /* sparingly: hairlines, monogram. never gradients */

  --jm-color-sale:        #A4453F;
  --jm-color-instock:     #4F6B57;
  --jm-color-oos:         #8A8F88;

  /* ---- type ---- */
  --jm-font-body: 'Cairo', 'Segoe UI', Tahoma, Arial, sans-serif;
  --jm-font-head: 'Cairo', 'Segoe UI', Tahoma, Arial, sans-serif;

  --jm-fs-xs:   0.75rem;
  --jm-fs-sm:   0.875rem;
  --jm-fs-base: 1rem;
  --jm-fs-md:   1.125rem;
  --jm-fs-lg:   1.375rem;
  --jm-fs-xl:   1.75rem;
  --jm-fs-2xl:  2.25rem;
  --jm-fs-3xl:  3rem;

  --jm-lh-tight: 1.25;
  --jm-lh-body:  1.75;  /* Arabic needs more line-height than Latin */
  --jm-lh-head:  1.35;

  --jm-fw-regular: 400;
  --jm-fw-medium:  500;
  --jm-fw-semi:    600;
  --jm-fw-bold:    700;

  /* ---- space (4px base) ---- */
  --jm-space-1: 0.25rem;
  --jm-space-2: 0.5rem;
  --jm-space-3: 0.75rem;
  --jm-space-4: 1rem;
  --jm-space-5: 1.5rem;
  --jm-space-6: 2rem;
  --jm-space-7: 3rem;
  --jm-space-8: 4rem;
  --jm-space-9: 6rem;

  /* ---- other ---- */
  --jm-radius:      2px;   /* sharp = premium. do not round more than this */
  --jm-radius-pill: 100px;
  --jm-container:   1280px;
  /* Reading measure. Arabic sets wider than Latin at the same point size, so a
     760px column left too much empty gutter on desktop. */
  --jm-container-narrow: 940px;
  --jm-shadow-sm: 0 1px 2px rgba(31, 42, 38, 0.06);
  --jm-shadow-md: 0 4px 16px rgba(31, 42, 38, 0.08);
  --jm-transition: 160ms ease;

  /* ---- derived tokens ----
   * Not in the contract's table, but needed by base/components and defined here
   * so that no other stylesheet has to hardcode a value. Each one is an alias or
   * a mechanical derivation of an authoritative token above.
   */
  --jm-color-focus:       var(--jm-color-accent);   /* focus-visible ring colour */
  --jm-focus-width:       2px;                      /* focus ring thickness */
  --jm-focus-offset:      2px;                      /* focus ring offset */
  --jm-color-overlay:     rgba(31, 42, 38, 0.48);   /* drawer/modal scrim — --jm-color-ink at 48% */
}

/* ---------------------------------------------------------------------------
 * Legacy Astra/Spectra compatibility
 *
 * The Collections, New Arrivals and Contact pages are still built from the
 * imported Spectra starter content, whose blocks reference Astra's global
 * colour variables in inline styles. Astra is no longer the active theme, so
 * those variables resolved to nothing and the blocks lost their colours.
 *
 * Mapping them onto the Jouman palette keeps that legacy content readable and
 * on-brand until those pages are rebuilt with the theme's own templates.
 * DELETE THIS BLOCK once no page references --ast-global-color-* any more.
 * ------------------------------------------------------------------------- */
:root {
  --ast-global-color-0: var(--jm-color-accent);
  --ast-global-color-1: var(--jm-color-accent-hover);
  --ast-global-color-2: var(--jm-color-ink);
  --ast-global-color-3: var(--jm-color-ink-2);
  --ast-global-color-4: var(--jm-color-ground);
  --ast-global-color-5: var(--jm-color-surface);
  --ast-global-color-6: var(--jm-color-surface-2);
  --ast-global-color-7: var(--jm-color-line);
  --ast-global-color-8: var(--jm-color-muted);
}