/* Design tokens. Brand colours + fonts arrive as --m-* custom properties
   printed inline from config; everything else is fixed fleet-wide here. */

:root {
  /* Derived surfaces */
  --m-surface: color-mix(in srgb, var(--m-bg) 92%, var(--m-text) 8%);
  --m-line: color-mix(in srgb, var(--m-text) 14%, transparent);
  --m-muted: color-mix(in srgb, var(--m-text) 55%, var(--m-bg) 45%);
  --m-primary-ink: #fff;

  /* Type scale — set for Arabic (needs more leading than Latin). */
  --m-fs-xs: 0.8rem;
  --m-fs-s: 0.925rem;
  --m-fs-base: 1rem;
  --m-fs-m: 1.15rem;
  --m-fs-l: 1.45rem;
  --m-fs-xl: 1.9rem;
  --m-fs-xxl: 2.5rem;
  --m-lh-tight: 1.35;
  --m-lh-base: 1.75;

  /* 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: 32px;
  --m-sp-7: 48px;
  --m-sp-8: 72px;
  --m-radius: 12px;
  --m-radius-s: 8px;
  --m-shadow: 0 10px 30px -18px color-mix(in srgb, var(--m-text) 45%, transparent);

  --m-container: 1120px;
  --m-touch: 44px;
}