:root {
  /* globals.css */
  --background: #FAF7F2;
  --foreground: #0F172A;
  --card: #FFFFFF;
  --muted: #64748B;
  --border: #DCDCDC;
  --primary: #F59E0B;
  --primary-soft: #FBF6ED;
  --success: #10B981;
  --success-soft: #D1FAE5;
  --warning: #F59E0B;
  --warning-soft: #FEF3C7;

  /* Aliases used in dashboard-html */
  --color-bg: #FAF7F2;
  --color-bg-riders: #F8F8F8;
  --color-bg-app: var(--color-bg);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-muted: var(--muted);
  --color-border: var(--border);
  --color-primary: var(--primary);
  --color-primary-soft: var(--primary-soft);
  --color-success: var(--success);
  --color-success-soft: var(--success-soft);
  --color-warning: var(--warning);
  --color-warning-soft: var(--warning-soft);

  /* Tailwind slate — components */
  --color-slate-50: #F8FAFC;
  --color-slate-100: #F1F5F9;
  --color-slate-200: #E2E8F0;
  --color-slate-400: #94A3B8;
  --color-slate-500: #64748B;
  --color-slate-600: #475569;
  --color-slate-700: #334155;
  --color-slate-900: #0F172A;

  /* Hardcoded in components → tokens */
  --color-text-dark: #32343E;
  --color-text-mid: #545454;
  --color-text-muted: #828282;
  --color-primary-brand: #E1902B;
  --color-stat-highlight-bg: #FBF6ED;
  --color-hero-wave-fill: #FBE3C0;
  --color-stat-icon-bg: #E1902B;
  --color-points: #0075AD;
  --color-points-soft: #E0F2FE;
  --color-brand-green: #17663A;
  --color-brand-green-soft: #EEFBF4;
  --color-approval-green: var(--color-brand-green);
  --color-approval-green-soft: var(--color-brand-green-soft);
  --color-approval-purple: #7C3AED;
  --color-approval-purple-soft: #EDE9FE;
  --color-star: #F8C313;
  --color-map-surface: #F4F4F2;
  --color-muted-surface: var(--color-map-surface);
  --color-popup-text: #242731;
  --color-path-green: #1F4D2E;
  --color-path-orange: #E1902B;
  --color-toggle-on: #22A56A;
  --color-toggle-off: #D4D4D8;
  --color-danger: #EF4444;
  --color-danger-soft: #FEF2F2;
  --color-gray-200: #E5E7EB;
  --color-gray-400: #9CA3AF;
  --color-gray-500: #6B7280;
  --color-gray-600: #4B5563;
  --color-toolbar-active-bg: #F7F5EF;
  --color-white-95: rgba(255, 255, 255, 0.95);

  --font-sans: 'Tajawal', var(--font-tajawal, system-ui), -apple-system, sans-serif;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-page: 20px;
  --space-page-inline-start: 10px;
  --space-page-inline-end: 20px;
  --pad-panel-y: 22px;
  --pad-panel-x: 20px;
  --gap-companies-inner: 10px;
  --gap-active-chip: 13px;
  --gap-riders-section: 16px;
  --gap-riders-stats: 10px;
  --gap-riders-grid: 16px;
  --w-rider-card: 335px;
  --w-users-stat-card: 675px;
  --gap-stat-card: 17px;
  --pad-stat-top: 12px;
  --pad-stat-bottom: 13px;
  --pad-toolbar-y: 14px;
  --pad-toolbar-x: 19px;
  --h-riders-toolbar: 83px;
  --radius-badge: 9px;
  --radius-cta-rider: 12px;
  --color-badge-purple-bg: #F4F1FD;
  --color-badge-purple-text: #4316CA;
  --color-badge-green-bg: #EEFBF4;
  --color-badge-green-text: #17663A;
  --color-search-border: #D4D4D4;
  --shadow-search: 0 1px 2px rgba(0, 0, 0, 0.05);

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-pill: 38px;
  --radius-full: 9999px;

  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.08);
  --shadow-md: 0 6px 18px rgba(15, 23, 42, 0.08);

  --sidebar-width: 56px;
  --content-max: 1364px;

  /* Component heights from Next */
  --h-stat-card: 132px;
  --h-users-stat: 133px;
  --h-user-card: 432px;
  --h-map-card: 409px;
  --h-active-users: 296px;
  --h-companies-panel: 711px;
  --w-stat-card: 445px;
  --w-companies: 517px;
  --w-map-col: 827px;
  --h-map-preview: 213px;
  --h-active-users: 296px;
  --size-active-avatar: 84px;
  --size-company-logo: 56px;
  --color-figma-title: #45464E;
  --color-figma-map-title: #242731;
  --color-figma-muted: #878787;
  --color-figma-stat-value: #101010;
  --color-figma-date: #A6A8B1;
  --color-figma-filter-border: #8B8B8B;
  --color-figma-filter-text: #414141;
  --color-badge-pending-bg: #E0F2FE;
  --color-badge-pending-text: #0075AD;
  --color-badge-joined-bg: #E0F2FE;
  --color-badge-joined-text: #0075AD;
  --color-badge-active-bg: #DCFCE7;
  --color-badge-active-text: #16A34A;
  --color-accent-green-bg: #DCFCE7;
  --color-accent-green-text: #16A34A;
  --color-accent-blue-bg: #E0F2FE;
  --color-accent-blue-text: #0075AD;
  --color-map-classification-bg: #E1902B33;
  --color-map-classification-text: #E1902B;
  --color-stat-delta: #36AB86;
  --color-map-stat-path-bg: rgba(150, 127, 99, 0.1);
  --color-map-stat-rider-bg: rgba(225, 144, 43, 0.1);
  --color-map-stat-event-bg: rgba(59, 63, 52, 0.08);
  --color-company-row-border: #F1F3F9;
  --h-profile-summary: 280px;
  --h-customer-data: 244px;
  --h-subscriptions: 501px;
  --h-map-page: 700px;
  --color-bg-detail: #F8F8F8;
  --color-border-light: #F1F5F9;
  --color-error: var(--color-danger);
  --color-primary-hover: #D97706;
  --w-status-card: 256px;
  --h-status-card: 80px;
  --profile-name-size: 30px;
  --profile-summary-bg: rgba(255, 255, 255, 0.7);
  --profile-summary-border: rgba(220, 220, 220, 0.5);
  --detail-grid-ratio: 1.32fr 1fr;

  /* Subscriptions donuts — Figma */
  --subscription-donut-gap: 120px;

  /* Approvals modal — Figma 1048:7043 */
  --approvals-modal-width: 400px;
  --approvals-modal-radius: 16px;
  --approvals-modal-shadow: 0 20px 24px -4px rgba(0, 0, 0, 0.1), 0 8px 8px -4px rgba(0, 0, 0, 0.04);
}