/* ==========================================================================
   Tmaroc design tokens — "Guichet" system
   One typeface for three scripts (Readex Pro), ink-and-paper surfaces, a single
   Atlas-green accent, editorial rules instead of boxes, fast restrained motion.
   ========================================================================== */
:root {
  /* Typography */
  --font-sans: 'Readex Pro', 'Segoe UI', Roboto, 'Noto Sans', 'Noto Sans Arabic', system-ui, sans-serif;
  --font-arabic: 'Readex Pro', 'Noto Sans Arabic', 'Segoe UI', Tahoma, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
  --fs-2xs: 0.6875rem; /* 11 */
  --fs-xs: 0.75rem;    /* 12 */
  --fs-sm: 0.8125rem;  /* 13 */
  --fs-base: 0.9375rem;/* 15 */
  --fs-md: 1rem;       /* 16 */
  --fs-lg: 1.125rem;   /* 18 */
  --fs-xl: 1.375rem;   /* 22 */
  --fs-2xl: 1.75rem;   /* 28 */
  --fs-3xl: 2.25rem;   /* 36 */
  --fs-4xl: 3rem;      /* 48 */
  --fs-5xl: 3.75rem;   /* 60 */
  --lh-tight: 1.1;
  --lh-snug: 1.3;
  --lh-normal: 1.5;
  --lh-relaxed: 1.65;
  --track-tight: -0.02em;
  --track-display: -0.03em;
  --track-normal: 0;
  --track-caps: 0.08em;

  /* Neutrals: one family, tinted toward the green of the brand */
  --c-paper: #f4f5f2;
  --c-bg: #ffffff;
  --c-surface: #f4f5f2;
  --c-surface-2: #e9ebe7;
  --c-surface-3: #dcdfda;
  --c-border: #e2e5e0;
  --c-border-strong: #c3c9c3;
  --c-ink: #141a16;
  --c-text: #141a16;
  --c-text-2: #4b554f;
  --c-text-3: #6d7872;
  --c-text-inverse: #ffffff;
  --c-overlay: rgba(20, 26, 22, 0.52);

  /* Brand: Atlas green */
  --c-brand: #0f6e48;
  --c-brand-hover: #0c5c3c;
  --c-brand-active: #094a30;
  --c-brand-soft: #e3f0e8;
  --c-brand-soft-2: #c9e3d4;
  --c-brand-text: #0b5a3b;
  --c-brand-ring: rgba(15, 110, 72, 0.28);

  /* Semantic (muted, status only) */
  --c-danger: #b9122c;      /* reserved for emergency + destructive */
  --c-danger-hover: #9b0f25;
  --c-danger-soft: #fbe9ec;
  --c-danger-text: #96102a;
  --c-warn: #a8580a;
  --c-warn-soft: #fbf0df;
  --c-warn-text: #7f4306;
  --c-info: #2456b5;
  --c-info-soft: #e8eefb;
  --c-info-text: #1f459a;
  --c-ok: var(--c-brand);
  --c-ok-soft: var(--c-brand-soft);
  --c-ok-text: var(--c-brand-text);
  --c-neutral-soft: var(--c-surface-2);
  --c-neutral-text: var(--c-text-2);

  /* Elevation: tinted with the ink, used only for floating layers */
  --shadow-1: 0 1px 2px rgba(20, 26, 22, 0.05);
  --shadow-2: 0 6px 18px rgba(20, 26, 22, 0.08), 0 1px 2px rgba(20, 26, 22, 0.05);
  --shadow-3: 0 18px 48px rgba(20, 26, 22, 0.18), 0 2px 6px rgba(20, 26, 22, 0.08);
  --shadow-focus: 0 0 0 3px var(--c-brand-ring);

  /* Radius: structured, never bubbly. Pills only for chips/toasts. */
  --r-xs: 3px;
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-pill: 999px;

  /* Spacing (4px scale) */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 28px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;

  /* Layout */
  --container: 1160px;
  --container-wide: 1360px;
  --gutter: 16px;
  --header-h: 56px;
  --bnav-h: 58px;
  --touch: 44px;

  /* Motion (Emil Kowalski curves; UI stays under 300 ms) */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --dur-fast: 120ms;
  --dur-base: 180ms;
  --dur-slow: 240ms;
  --dur-drawer: 300ms;

  /* Z-index */
  --z-header: 50;
  --z-bnav: 55;
  --z-dropdown: 60;
  --z-sheet: 80;
  --z-modal: 90;
  --z-toast: 100;

  color-scheme: light;
}

@media (min-width: 768px) {
  :root {
    --gutter: 24px;
    --header-h: 64px;
  }
}

/* Arabic: same family (Readex Pro ships Arabic), no negative tracking, taller leading */
[dir="rtl"] {
  --track-tight: 0;
  --track-display: 0;
  --track-caps: 0;
  --lh-tight: 1.25;
  --lh-snug: 1.45;
  --lh-normal: 1.7;
  --lh-relaxed: 1.85;
}