/* NARI — design tokens v3 (official brand brief, 2026-11-07). Single source of truth for web, PWA, design canvas and apps.
   White dominates. Ruby Red is for interaction and priority only. Charcoal text, never red body text.
   Logo gradient is artwork (use the original files); the UI is flat — no 3D, no glow, no glass. */
:root {
  --nari-primary: #B8323D;          /* Ruby Red — primary buttons, active states, PIN */
  --nari-primary-hover: #8E122B;    /* Deep Ruby — pressed, red text/important */
  --nari-primary-deep: #8E122B;
  --nari-primary-bright: #E51240;   /* marketing accents only */
  --nari-primary-soft: #FBE9EB;     /* tint: selected chip / badge background */
  --nari-background: #FFFFFF;
  --nari-surface: #FFFFFF;
  --nari-surface-2: #F5F5F6;
  --nari-text: #17191E;             /* Charcoal */
  --nari-muted: #555963;
  --nari-border: #E4E5E8;
  --nari-divider: #ECEDEF;
  --nari-charcoal: #19191D;         /* driver app dark surfaces, driver icon background */
  --nari-charcoal-2: #242429;
  --nari-ok: #167347; --nari-ok-soft: #E3F3EA;
  --nari-warning: #9A5700; --nari-warning-soft: #FBF1DF;
  --nari-danger: #B42332; --nari-danger-soft: #FCE6E8;
  --nari-map-land: #F1EFEA; --nari-map-road: #FFFFFF; --nari-map-block: #E3E0D8;
  --nari-radius-card: 16px; --nari-radius-button: 14px; --nari-radius-field: 14px; --nari-radius-sheet: 24px; --nari-radius-icon: 12px;
  --nari-tap-min: 44px; --nari-action-height: 56px; --nari-driver-action-height: 64px;
  --nari-shadow: 0 4px 16px rgba(23, 25, 30, .06);
  --nari-font: "IBM Plex Sans Arabic", "Noto Sans Arabic", system-ui, sans-serif;
  --nari-font-latin: "Manrope", "IBM Plex Sans Arabic", system-ui, sans-serif;
  /* type scale */
  --nari-t-display: 32px; --nari-t-title: 26px; --nari-t-section: 22px; --nari-t-card: 18px;
  --nari-t-body: 16px; --nari-t-button: 17px; --nari-t-support: 14px; --nari-t-fare: 32px;
}
[data-theme="dark"] {
  --nari-primary: #F16B79; --nari-primary-hover: #B8323D; --nari-primary-deep: #B8323D; --nari-primary-soft: #3A1E24;
  --nari-background: #19191D; --nari-surface: #242429; --nari-surface-2: #2D2D33;
  --nari-text: #FFFFFF; --nari-muted: #C6C6CF; --nari-border: #414149; --nari-divider: #36363D;
  --nari-ok: #6CD6A2; --nari-ok-soft: #1E3A2C; --nari-warning: #F5C477; --nari-warning-soft: #3A2E1A;
  --nari-danger: #FF8993; --nari-danger-soft: #3A1E24;
  --nari-map-land: #242429; --nari-map-road: #36363D; --nari-map-block: #2D2D33;
  --nari-shadow: 0 4px 16px rgba(0, 0, 0, .4);
}
/* Primary button: Ruby fill + white text in both themes (brief §9); text uses Arabic font, numbers Manrope. */
.nari-button { min-height: var(--nari-action-height); background: #B8323D; color: #fff; border: 0; border-radius: var(--nari-radius-button); font: 600 var(--nari-t-button) var(--nari-font); padding: 0 20px; }
.nari-button:active { background: #8E122B; }
.nari-button:disabled { opacity: .45; }
.nari-num { font-family: var(--nari-font-latin); font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; }