/**
 * Qahera UI Kit — Canonical Design Tokens v1.0
 * Generated automatically from tokens/ YAML sources. DO NOT EDIT.
 */

@import url('https://fonts.googleapis.com/css2?family=Alexandria:wght@300;400;500;600;700;800;900&family=Cairo:wght@300;400;500;600;700;800&family=El+Messiri:wght@400;500;600;700&family=Tajawal:wght@300;400;500;700&family=Plus+Jakarta+Sans:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap');

:root, [data-theme="light"], [data-mode="light"] {
  --qhr-color-blue-50: #eff6ff;
  --qhr-color-blue-100: #dbeafe;
  --qhr-color-blue-200: #bfdbfe;
  --qhr-color-blue-300: #93c5fd;
  --qhr-color-blue-400: #60a5fa;
  --qhr-color-blue-500: #3b82f6;
  --qhr-color-blue-600: #0b6bcb;
  --qhr-color-blue-700: #0958a5;
  --qhr-color-blue-800: #084784;
  --qhr-color-blue-900: #073b6d;
  --qhr-color-blue-950: #042446;
  --qhr-color-slate-50: #f8fafc;
  --qhr-color-slate-100: #f1f5f9;
  --qhr-color-slate-200: #e2e8f0;
  --qhr-color-slate-300: #cbd5e1;
  --qhr-color-slate-400: #94a3b8;
  --qhr-color-slate-500: #64748b;
  --qhr-color-slate-600: #475569;
  --qhr-color-slate-700: #334155;
  --qhr-color-slate-800: #1e293b;
  --qhr-color-slate-900: #0f172a;
  --qhr-color-slate-950: #020617;
  --qhr-color-emerald-50: #ecfdf5;
  --qhr-color-emerald-100: #d1fae5;
  --qhr-color-emerald-200: #a7f3d0;
  --qhr-color-emerald-300: #6ee7b7;
  --qhr-color-emerald-400: #34d399;
  --qhr-color-emerald-500: #10b981;
  --qhr-color-emerald-600: #059669;
  --qhr-color-emerald-700: #047857;
  --qhr-color-emerald-800: #065f46;
  --qhr-color-emerald-900: #064e3b;
  --qhr-color-emerald-950: #022c22;
  --qhr-color-amber-50: #fffbeb;
  --qhr-color-amber-100: #fef3c7;
  --qhr-color-amber-200: #fde68a;
  --qhr-color-amber-300: #fcd34d;
  --qhr-color-amber-400: #fbbf24;
  --qhr-color-amber-500: #f59e0b;
  --qhr-color-amber-600: #d97706;
  --qhr-color-amber-700: #b45309;
  --qhr-color-amber-800: #92400e;
  --qhr-color-amber-900: #78350f;
  --qhr-color-amber-950: #451a03;
  --qhr-color-rose-50: #fff1f2;
  --qhr-color-rose-100: #ffe4e6;
  --qhr-color-rose-200: #fecdd3;
  --qhr-color-rose-300: #fda4af;
  --qhr-color-rose-400: #fb7185;
  --qhr-color-rose-500: #f43f5e;
  --qhr-color-rose-600: #e11d48;
  --qhr-color-rose-700: #be123c;
  --qhr-color-rose-800: #9f1239;
  --qhr-color-rose-900: #881337;
  --qhr-color-rose-950: #4c0519;
  --qhr-color-primary-bg: #0b6bcb;
  --qhr-color-primary-fg: #ffffff;
  --qhr-color-primary-border: #0b6bcb;
  --qhr-color-primary-hover: #0958a5;
  --qhr-color-primary-subtle: #eff6ff;
  --qhr-color-secondary-bg: #f1f5f9;
  --qhr-color-secondary-fg: #0f172a;
  --qhr-color-secondary-border: #e2e8f0;
  --qhr-color-secondary-hover: #e2e8f0;
  --qhr-color-secondary-subtle: #f8fafc;
  --qhr-color-neutral-bg: #f8fafc;
  --qhr-color-neutral-fg: #0f172a;
  --qhr-color-neutral-border: #e2e8f0;
  --qhr-color-neutral-hover: #f1f5f9;
  --qhr-color-neutral-muted: #94a3b8;
  --qhr-color-neutral-subtle: #f1f5f9;
  --qhr-color-success-bg: #059669;
  --qhr-color-success-fg: #ffffff;
  --qhr-color-success-border: #059669;
  --qhr-color-success-hover: #047857;
  --qhr-color-success-subtle: #ecfdf5;
  --qhr-color-warning-bg: #d97706;
  --qhr-color-warning-fg: #ffffff;
  --qhr-color-warning-border: #d97706;
  --qhr-color-warning-hover: #b45309;
  --qhr-color-warning-subtle: #fffbeb;
  --qhr-color-danger-bg: #e11d48;
  --qhr-color-danger-fg: #ffffff;
  --qhr-color-danger-border: #e11d48;
  --qhr-color-danger-hover: #be123c;
  --qhr-color-danger-subtle: #fff1f2;
  --qhr-color-info-bg: #0b6bcb;
  --qhr-color-info-fg: #ffffff;
  --qhr-color-info-border: #0b6bcb;
  --qhr-color-info-hover: #0958a5;
  --qhr-color-info-subtle: #eff6ff;
  --qhr-color-wadj-name: Wadj;
  --qhr-color-wadj-arabic: الوَدج;
  --qhr-color-wadj-meaning: Sacred Egyptian Malachite Emerald of Growth, Wisdom, and Renewal;
  --qhr-color-wadj-base: #135E4E;
  --qhr-color-wadj-rgb: 19, 94, 78;
  --qhr-color-wadj-hover: #0D463A;
  --qhr-color-wadj-active: #08332A;
  --qhr-color-wadj-surface: #E6F3EF;
  --qhr-color-wadj-light: #C2E4DC;
  --qhr-color-wadj-foreground: #FFFFFF;
  --qhr-color-nebu-name: Nebu;
  --qhr-color-nebu-arabic: النِبو;
  --qhr-color-nebu-meaning: Sacred Sun Gold of Royalty, High Prestige, and Incorruptibility;
  --qhr-color-nebu-base: #C98818;
  --qhr-color-nebu-rgb: 201, 136, 24;
  --qhr-color-nebu-hover: #A86F0F;
  --qhr-color-nebu-active: #8A5A0A;
  --qhr-color-nebu-surface: #FDF4E3;
  --qhr-color-nebu-light: #F5D79E;
  --qhr-color-nebu-foreground: #181307;
  --qhr-color-khesbed-name: Khesbed;
  --qhr-color-khesbed-arabic: الخِسبِد;
  --qhr-color-khesbed-meaning: Royal Lapis Lazuli Cobalt of Deep Intellect, Truth, and Clarity;
  --qhr-color-khesbed-base: #0E3C66;
  --qhr-color-khesbed-rgb: 14, 60, 102;
  --qhr-color-khesbed-hover: #092947;
  --qhr-color-khesbed-active: #061C31;
  --qhr-color-khesbed-surface: #E7F0F8;
  --qhr-color-khesbed-light: #BAD4EB;
  --qhr-color-khesbed-foreground: #FFFFFF;
  --qhr-color-tamy-name: Tamy;
  --qhr-color-tamy-arabic: الطمي;
  --qhr-color-tamy-meaning: Nile Riverbed Clay, Red Jasper, and Terracotta Foundations;
  --qhr-color-tamy-base: #B34A26;
  --qhr-color-tamy-rgb: 179, 74, 38;
  --qhr-color-tamy-hover: #8F381A;
  --qhr-color-tamy-active: #6F2A12;
  --qhr-color-tamy-surface: #FBECE7;
  --qhr-color-tamy-light: #F3C5B5;
  --qhr-color-tamy-foreground: #FFFFFF;
  --qhr-color-papyrus-name: Papyrus;
  --qhr-color-papyrus-arabic: البردي;
  --qhr-color-papyrus-meaning: Archival Papyrus Sand and Parchment Editorial Surfaces;
  --qhr-color-papyrus-base: #FAF8F2;
  --qhr-color-papyrus-rgb: 250, 248, 242;
  --qhr-color-papyrus-hover: #F2EDE0;
  --qhr-color-papyrus-active: #E8E0CE;
  --qhr-color-papyrus-surface: #FFFFFF;
  --qhr-color-papyrus-border: #E2DAC8;
  --qhr-color-papyrus-foreground: #121F1B;
  --qhr-color-kohl-name: Kohl;
  --qhr-color-kohl-arabic: الكحل;
  --qhr-color-kohl-meaning: Deep Egyptian Mineral Black and Obsidian Contrast;
  --qhr-color-kohl-base: #0D1412;
  --qhr-color-kohl-rgb: 13, 20, 18;
  --qhr-color-kohl-surface: #141D1A;
  --qhr-color-kohl-border: #24322D;
  --qhr-color-kohl-foreground: #F8FAF9;
  --qhr-space-0: 0px;
  --qhr-space-1: 4px;
  --qhr-space-2: 8px;
  --qhr-space-3: 12px;
  --qhr-space-4: 16px;
  --qhr-space-5: 20px;
  --qhr-space-6: 24px;
  --qhr-space-8: 32px;
  --qhr-space-10: 40px;
  --qhr-space-12: 48px;
  --qhr-space-16: 64px;
  --qhr-space-20: 80px;
  --qhr-space-24: 96px;
  --qhr-space-0-5: 2px;
  --qhr-space-1-5: 6px;
  --qhr-space-2-5: 10px;
  --qhr-space-3-5: 14px;
  --qhr-radius-none: 0px;
  --qhr-radius-xs: 4px;
  --qhr-radius-sm: 6px;
  --qhr-radius-md: 10px;
  --qhr-radius-lg: 16px;
  --qhr-radius-xl: 24px;
  --qhr-radius-full: 9999px;
  --qhr-radius-pill: 9999px;
  --qhr-shadow-none: none;
  --qhr-shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --qhr-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  --qhr-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --qhr-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  --qhr-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  --qhr-shadow-book: -8px 12px 28px -4px rgba(0, 0, 0, 0.22), -2px 4px 10px rgba(0, 0, 0, 0.08);
  --qhr-shadow-floating: 0 24px 48px -12px rgba(0, 0, 0, 0.18), 0 8px 20px -4px rgba(0, 0, 0, 0.08);
  --qhr-shadow-cartouche: 0 4px 14px -2px rgba(201, 136, 24, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.6);
  --qhr-surface-base: #ffffff;
  --qhr-surface-elevated: #ffffff;
  --qhr-surface-muted: #f8fafc;
  --qhr-surface-overlay: rgba(15, 23, 42, 0.5);
  --qhr-content-primary: #0f172a;
  --qhr-content-secondary: #475569;
  --qhr-content-muted: #94a3b8;
  --qhr-content-inverse: #ffffff;
  --qhr-border-subtle: #e2e8f0;
  --qhr-border-strong: #cbd5e1;
  --qhr-border-focus_ring: rgba(11, 107, 203, 0.35);
  --qhr-typography-primary: 'Alexandria', 'Cairo', system-ui, -apple-system, sans-serif;
  --qhr-typography-heading: 'Alexandria', 'Cairo', system-ui, sans-serif;
  --qhr-typography-body: 'Cairo', 'Alexandria', system-ui, -apple-system, sans-serif;
  --qhr-typography-display: 'Alexandria', 'Cairo', sans-serif;
  --qhr-typography-mono: 'JetBrains Mono', 'Fira Code', monospace;
  --qhr-motion-version: 1.0.0;
  --qhr-motion-namespace: qhr;
  --qhr-motion-category: motion;
  --qhr-motion-description: Semantic motion durations and bezier curves;
  --qhr-motion-duration-instant: 0ms;
  --qhr-motion-duration-fast: 150ms;
  --qhr-motion-duration-normal: 250ms;
  --qhr-motion-duration-slow: 400ms;
  --qhr-motion-duration-slower: 600ms;
  --qhr-motion-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --qhr-motion-ease-entrance: cubic-bezier(0, 0, 0.2, 1);
  --qhr-motion-ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --qhr-motion-ease-emphasized: cubic-bezier(0.2, 0, 0, 1);
  --qhr-version: 1.0.0;
  --qhr-namespace: qhr;
  --qhr-category: components;
  --qhr-description: Component-specific token bindings referencing semantic and primitive tokens;
  --qhr-button-primary-background: #0b6bcb;
  --qhr-button-primary-foreground: #ffffff;
  --qhr-button-primary-hover: #0958a5;
  --qhr-button-primary-border: transparent;
  --qhr-button-secondary-background: #f1f5f9;
  --qhr-button-secondary-foreground: #0f172a;
  --qhr-button-secondary-hover: #e2e8f0;
  --qhr-button-secondary-border: #e2e8f0;
  --qhr-button-outline-background: transparent;
  --qhr-button-outline-foreground: #0b6bcb;
  --qhr-button-outline-hover: #eff6ff;
  --qhr-button-outline-border: #0b6bcb;
  --qhr-button-ghost-background: transparent;
  --qhr-button-ghost-foreground: #0b6bcb;
  --qhr-button-ghost-hover: #eff6ff;
  --qhr-button-ghost-border: transparent;
  --qhr-button-destructive-background: #e11d48;
  --qhr-button-destructive-foreground: #ffffff;
  --qhr-button-destructive-hover: #be123c;
  --qhr-button-destructive-border: transparent;
  --qhr-input-background: #ffffff;
  --qhr-input-foreground: #0f172a;
  --qhr-input-border: #cbd5e1;
  --qhr-input-focus_border: #0b6bcb;
  --qhr-input-focus_ring: rgba(11, 107, 203, 0.35);
  --qhr-input-disabled_bg: #f8fafc;
  --qhr-card-background: #ffffff;
  --qhr-card-border: #e2e8f0;
  --qhr-card-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  --qhr-card-hover_shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --qhr-modal-backdrop: rgba(15, 23, 42, 0.5);
  --qhr-modal-dialog_bg: #ffffff;
  --qhr-modal-border: #e2e8f0;
  --qhr-modal-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  --qhr-badge-primary_bg: #eff6ff;
  --qhr-badge-primary_fg: #0b6bcb;
  --qhr-badge-success_bg: #ecfdf5;
  --qhr-badge-success_fg: #059669;
  --qhr-badge-warning_bg: #fffbeb;
  --qhr-badge-warning_fg: #d97706;
  --qhr-badge-danger_bg: #fff1f2;
  --qhr-badge-danger_fg: #e11d48;
  --qhr-alert-info_bg: #eff6ff;
  --qhr-alert-info_border: #bfdbfe;
  --qhr-alert-info_fg: #073b6d;
  --qhr-alert-success_bg: #ecfdf5;
  --qhr-alert-success_border: #a7f3d0;
  --qhr-alert-success_fg: #064e3b;
  --qhr-alert-warning_bg: #fffbeb;
  --qhr-alert-warning_border: #fde68a;
  --qhr-alert-warning_fg: #78350f;
  --qhr-alert-danger_bg: #fff1f2;
  --qhr-alert-danger_border: #fecdd3;
  --qhr-alert-danger_fg: #881337;
  --qhr-z-negative: -1;
  --qhr-z-base: 0;
  --qhr-z-elevated: 1;
  --qhr-z-decor: 2;
  --qhr-z-overlay: 10;
  --qhr-z-dropdown: 100;
  --qhr-z-sticky: 500;
  --qhr-z-navbar: 1000;
  --qhr-z-modal-backdrop: 2000;
  --qhr-z-modal: 2010;
  --qhr-z-popover: 2020;
  --qhr-z-toast: 3000;
  --qhr-z-tooltip: 3010;
  --qhr-z-preloader: 10000;

  /* Semantic Color Aliases */
  --qhr-color-primary: var(--qhr-color-primary-bg);
  --qhr-color-primary-600: var(--qhr-color-blue-600, #0b6bcb);
  --qhr-color-primary-700: var(--qhr-color-blue-700, #0958a5);
  --qhr-color-primary-50: var(--qhr-color-blue-50, #eff6ff);
  --qhr-color-secondary: var(--qhr-color-secondary-bg);
  --qhr-color-neutral-100: var(--qhr-color-slate-100, #f1f5f9);
  --qhr-color-neutral-200: var(--qhr-color-slate-200, #e2e8f0);
  --qhr-color-neutral-900: var(--qhr-color-slate-900, #0f172a);
  --qhr-color-danger: var(--qhr-color-danger-bg);
  --qhr-color-danger-600: var(--qhr-color-rose-600, #e11d48);
  --qhr-color-danger-700: var(--qhr-color-rose-700, #be123c);
  --qhr-color-danger-50: var(--qhr-color-rose-50, #fff1f2);
  --qhr-color-success-600: var(--qhr-color-emerald-600, #059669);
  --qhr-color-success-50: var(--qhr-color-emerald-50, #ecfdf5);
  --qhr-color-warning-600: var(--qhr-color-amber-600, #d97706);
  --qhr-color-warning-50: var(--qhr-color-amber-50, #fffbeb);

  --qhr-font-family-primary: 'Cairo', system-ui, -apple-system, sans-serif;
  --qhr-font-heading: 'Cairo', 'Plus Jakarta Sans', system-ui, sans-serif;
  --qhr-font-body: 'Cairo', 'Tajawal', system-ui, -apple-system, sans-serif;
  --qhr-font-primary: 'Cairo', system-ui, -apple-system, sans-serif;
  --qhr-font-display-heritage: 'El Messiri', serif;
  --qhr-font-display-modern: 'Plus Jakarta Sans', sans-serif;
  --qhr-font-body-alt: 'Tajawal', sans-serif;
  --qhr-font-mono: 'JetBrains Mono', monospace;
  --qhr-ring-focus: rgba(11, 107, 203, 0.35);
  --qhr-modal-dialog_bg: var(--qhr-surface-elevated, #ffffff);
  --qhr-modal-dialog-bg: var(--qhr-surface-elevated, #ffffff);
  --qhr-modal-backdrop: var(--qhr-surface-overlay, rgba(15, 23, 42, 0.5));
  --qhr-modal-border: var(--qhr-border-subtle, #e2e8f0);

  /* Canonical Surface & Text Aliases */
  --qhr-surface-page: #f8fafc;
  --qhr-surface-card: #ffffff;
  --qhr-surface-subtle: #f1f5f9;
  --qhr-text-primary: #0f172a;
  --qhr-text-secondary: #475569;
  --qhr-text-muted: #64748b;
}

[data-theme="dark"] {
  --qhr-surface-base: #020617;
  --qhr-surface-elevated: #0f172a;
  --qhr-surface-muted: #1e293b;
  --qhr-surface-overlay: rgba(2, 6, 23, 0.85);
  --qhr-content-primary: #f8fafc;
  --qhr-content-secondary: #e2e8f0;
  --qhr-content-muted: #94a3b8;
  --qhr-border-subtle: #1e293b;
  --qhr-border-strong: #334155;
  --qhr-color-secondary-bg: #1e293b;
  --qhr-color-secondary-fg: #f8fafc;
  --qhr-color-secondary-border: #334155;
  --qhr-color-secondary-hover: #334155;
  --qhr-ring-focus: rgba(96, 165, 250, 0.45);
  --qhr-color-primary: var(--qhr-color-blue-500, #3b82f6);
  --qhr-color-primary-600: var(--qhr-color-blue-500, #3b82f6);
  --qhr-color-primary-700: var(--qhr-color-blue-600, #0b6bcb);
  --qhr-color-neutral-100: var(--qhr-color-slate-800, #1e293b);
  --qhr-color-neutral-200: var(--qhr-color-slate-700, #334155);
  --qhr-color-neutral-900: var(--qhr-color-slate-50, #f8fafc);
  --qhr-modal-dialog_bg: var(--qhr-surface-elevated, #0f172a);
  --qhr-modal-dialog-bg: var(--qhr-surface-elevated, #0f172a);
  --qhr-modal-backdrop: var(--qhr-surface-overlay, rgba(2, 6, 23, 0.75));
  --qhr-modal-border: var(--qhr-border-subtle, #334155);

  /* High-Contrast Dark Badges */
  --qhr-badge-primary_bg: rgba(59, 130, 246, 0.18);
  --qhr-badge-primary_fg: #93c5fd;
  --qhr-badge-success_bg: rgba(16, 185, 129, 0.18);
  --qhr-badge-success_fg: #6ee7b7;
  --qhr-badge-warning_bg: rgba(245, 158, 11, 0.18);
  --qhr-badge-warning_fg: #fde68a;
  --qhr-badge-danger_bg: rgba(244, 63, 94, 0.18);
  --qhr-badge-danger_fg: #fda4af;

  /* High-Contrast Dark Alerts */
  --qhr-alert-info_bg: rgba(59, 130, 246, 0.14);
  --qhr-alert-info_border: rgba(96, 165, 250, 0.35);
  --qhr-alert-info_fg: #bfdbfe;
  --qhr-alert-success_bg: rgba(16, 185, 129, 0.14);
  --qhr-alert-success_border: rgba(52, 211, 153, 0.35);
  --qhr-alert-success_fg: #a7f3d0;
  --qhr-alert-warning_bg: rgba(245, 158, 11, 0.14);
  --qhr-alert-warning_border: rgba(251, 191, 36, 0.35);
  --qhr-alert-warning_fg: #fde68a;
  --qhr-alert-danger_bg: rgba(244, 63, 94, 0.14);
  --qhr-alert-danger_border: rgba(251, 113, 133, 0.35);
  --qhr-alert-danger_fg: #fecdd3;

  /* High-Contrast Dark Surfaces & Text */
  --qhr-surface-page: #020617;
  --qhr-surface-card: #0f172a;
  --qhr-surface-subtle: #0f172a;
  --qhr-text-primary: #f8fafc;
  --qhr-text-secondary: #cbd5e1;
  --qhr-text-muted: #94a3b8;
}

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  font-family: var(--qhr-font-body);
  background-color: var(--qhr-surface-base);
  color: var(--qhr-content-primary);
  line-height: 1.5;
  margin: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--qhr-font-heading);
  font-weight: 600;
  margin: 0;
}