/* R7 — canonical design tokens (Ruling 5/11, briefing-pack Part 2, verbatim).
 * Loaded by BOTH frontends: linked directly here for the vanilla admin, and
 * pulled in via a relative import for the React POS build (see index.css).
 * These are the NEW primitives; app.js/style.css's existing --yb-radius-lg and
 * --btn-* names are aliased onto them in style.css (see the comment there) so
 * nothing already shipped changes shape — a deliberate, disclosed convergence,
 * not a byte-identical mapping (see docs/ux-redesign/02-briefing-pack/design-system/token-migration.md). */
:root {
  /* Color primitives */
  --color-navy: #0F172A;
  --color-yellow: #F5D547;
  --color-bg: #FAFAF7;

  /* Neutral scale */
  --color-slate-50: #F1F5F9;
  --color-slate-200: #E2E8F0;
  --color-slate-400: #94A3B8;
  --color-slate-500: #64748B;
  --color-slate-700: #334155;

  /* Semantic */
  --color-success: #10B981;
  --color-warn: #F59E0B;
  --color-error: #EF4444;
  --color-info: #3B82F6;

  /* Typography */
  --font-latin: 'Inter', system-ui, sans-serif;
  --font-arabic: 'IBM Plex Sans Arabic', 'Noto Sans Arabic', sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  /* Spacing (8pt macro / 4pt intra) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-12: 48px;

  /* Radii */
  --radius-input: 6px;
  --radius-cta: 8px;
  --radius-card: 12px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(15,23,42,0.05);
  --shadow-md: 0 4px 6px rgba(15,23,42,0.07);
  --shadow-lg: 0 10px 15px rgba(15,23,42,0.10);
}

[dir="rtl"] {
  /* Arabic typography: +15% line-height to accommodate glyph height */
  --line-height-adjust: 1.15;
}