/* 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 */
  --m-surface:      color-mix(in srgb, var(--m-bg) 96%, var(--m-text) 4%);
  --m-surface-2:    color-mix(in srgb, var(--m-bg) 90%, var(--m-accent) 10%);
  --m-line:         color-mix(in srgb, var(--m-text) 12%, transparent);
  --m-line-strong:  color-mix(in srgb, var(--m-text) 24%, transparent);
  --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%);
  --m-on-primary:   #fff;
  --m-success-bg:   #e3f0e8; --m-success-ink: #1d6b43;
  --m-danger-bg:    #f7e0e0; --m-danger-ink:  #8a1c1c;

  /* Type — Arabic-first scale. Display tight, body airy. */
  --m-fs-xs:   0.8125rem;
  --m-fs-s:    0.9375rem;
  --m-fs-base: 1rem;
  --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: 10px; --m-r: 16px; --m-r-l: 22px; --m-r-pill: 999px;
  --m-shadow-s: 0 2px 10px -4px color-mix(in srgb, var(--m-text) 22%, transparent);
  --m-shadow:   0 14px 38px -20px color-mix(in srgb, var(--m-text) 45%, transparent);
  --m-ring:     0 0 0 1px var(--m-line);

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

  --m-container: 1120px;
  --m-touch: 44px;
  --m-header-h: 62px;
}