/* ========================================
   DESIGN TOKENS — single source of truth
   Brand: navy (#0f1e3c) + gold (#c9a227)
   No other file may contain hex / rgb / hsl.
   ======================================== */

:root {
    /* Primary (gold) scale */
    --primary-50: #fffaeb;
    --primary-100: #f5e9c0;
    --primary-200: #fde68a;
    --primary-300: #fcd34d;
    --primary-400: #e8c44a;
    --primary-500: #c9a227;
    --primary-600: #b58422;
    --primary-700: #8f6816;
    --primary-800: #744e0a;
    --primary-900: #5c3d08;

    /* Neutral scale */
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;

    /* Brand navy scale */
    --color-brand-50: #e8eef8;
    --color-brand-100: #c5d3ea;
    --color-brand-200: #8aa3cc;
    --color-brand-300: #5a7aaf;
    --color-brand-400: #3a5f9b;
    --color-brand-500: #253b6d;
    --color-brand-600: #1e3a5f;
    --color-brand-700: #162447;
    --color-brand-800: #0f1e3c;
    --color-brand-900: #0b162b;
    --color-brand-950: #071742;
    --color-brand: var(--color-brand-800);

    /* Accent (gold) aliases of the primary scale */
    --color-accent-50: var(--primary-50);
    --color-accent-100: var(--primary-100);
    --color-accent-200: var(--primary-200);
    --color-accent-400: var(--primary-400);
    --color-accent: var(--primary-500);
    --color-accent-600: var(--primary-600);
    --color-accent-700: var(--primary-700);

    /* Secondary (slate) — supporting UI, not a second brand */
    --secondary-50: #f8fafc;
    --secondary-100: #f1f5f9;
    --secondary-200: #e2e8f0;
    --secondary-300: #cbd5e1;
    --secondary-400: #94a3b8;
    --secondary-500: #64748b;
    --secondary-600: #475569;
    --secondary-700: #334155;
    --secondary-800: #273344;
    --secondary-900: #1b2532;

    /* Semantic scales */
    --success-50: #ecfdf5;
    --success-100: #d1fae5;
    --success-200: #a7f3d0;
    --success-300: #6ee7b7;
    --success-400: #34d399;
    --success-500: #10b981;
    --success-600: #059669;
    --success-700: #047857;
    --success-800: #065f46;
    --success-900: #064e3b;
    --warning-50: #fffbeb;
    --warning-100: #fef3c7;
    --warning-200: #fde68a;
    --warning-300: #fcd34d;
    --warning-400: #fbbf24;
    --warning-500: #f59e0b;
    --warning-600: #d97706;
    --warning-700: #b45309;
    --warning-800: #92400e;
    --warning-900: #78350f;
    --danger-50: #fef2f2;
    --danger-100: #fee2e2;
    --danger-200: #fecaca;
    --danger-300: #fca5a5;
    --danger-400: #f87171;
    --danger-500: #ef4444;
    --danger-600: #dc2626;
    --danger-700: #b91c1c;
    --danger-800: #991b1b;
    --danger-900: #7f1d1d;
    --info-50: #eff6ff;
    --info-100: #dbeafe;
    --info-200: #bfdbfe;
    --info-300: #93c5fd;
    --info-400: #60a5fa;
    --info-500: #3b82f6;
    --info-600: #2563eb;
    --info-700: #1d4ed8;
    --info-800: #1e40af;
    --info-900: #1e3a8a;

    --white: #ffffff;
    --black: #000000;
    --transparent: transparent;

    /* Surfaces / text / borders */
    --color-surface: var(--white);
    --color-surface-muted: #faf8f3;
    --color-surface-subtle: #f6f4ef;
    --color-text: var(--color-brand);
    --color-text-muted: #667085;
    --color-border: #e8e5e0;
    --color-border-strong: #d5dce6;
    --color-focus-ring: var(--color-accent);
    --color-danger: var(--danger-700);
    --color-success: var(--success-700);
    --color-ui-primary: var(--color-brand);
    --color-ui-primary-hover: var(--color-brand-900);
    --color-on-brand: var(--white);
    --color-on-accent: var(--color-brand);

    /* Overlays (rgba only lives here) */
    --overlay-white-06: rgba(255, 255, 255, 0.06);
    --overlay-white-08: rgba(255, 255, 255, 0.08);
    --overlay-white-10: rgba(255, 255, 255, 0.1);
    --overlay-white-12: rgba(255, 255, 255, 0.12);
    --overlay-white-14: rgba(255, 255, 255, 0.14);
    --overlay-white-16: rgba(255, 255, 255, 0.16);
    --overlay-white-18: rgba(255, 255, 255, 0.18);
    --overlay-white-22: rgba(255, 255, 255, 0.22);
    --overlay-white-25: rgba(255, 255, 255, 0.25);
    --overlay-white-30: rgba(255, 255, 255, 0.3);
    --overlay-white-35: rgba(255, 255, 255, 0.35);
    --overlay-white-40: rgba(255, 255, 255, 0.4);
    --overlay-white-45: rgba(255, 255, 255, 0.45);
    --overlay-white-55: rgba(255, 255, 255, 0.55);
    --overlay-white-60: rgba(255, 255, 255, 0.6);
    --overlay-white-62: rgba(255, 255, 255, 0.62);
    --overlay-white-65: rgba(255, 255, 255, 0.65);
    --overlay-white-68: rgba(255, 255, 255, 0.68);
    --overlay-white-70: rgba(255, 255, 255, 0.7);
    --overlay-white-78: rgba(255, 255, 255, 0.78);
    --overlay-white-82: rgba(255, 255, 255, 0.82);
    --overlay-white-86: rgba(255, 255, 255, 0.86);
    --overlay-white-92: rgba(255, 255, 255, 0.92);
    --overlay-black-05: rgba(0, 0, 0, 0.05);
    --overlay-black-10: rgba(0, 0, 0, 0.1);
    --overlay-black-18: rgba(0, 0, 0, 0.18);
    --overlay-black-22: rgba(0, 0, 0, 0.22);
    --overlay-black-25: rgba(0, 0, 0, 0.25);
    --overlay-black-40: rgba(0, 0, 0, 0.4);
    --overlay-black-50: rgba(0, 0, 0, 0.5);
    --overlay-black-70: rgba(0, 0, 0, 0.7);
    --overlay-brand-04: rgba(15, 30, 60, 0.04);
    --overlay-brand-05: rgba(15, 30, 60, 0.05);
    --overlay-brand-06: rgba(15, 30, 60, 0.06);
    --overlay-brand-08: rgba(15, 30, 60, 0.08);
    --overlay-brand-10: rgba(15, 30, 60, 0.1);
    --overlay-brand-12: rgba(15, 30, 60, 0.12);
    --overlay-brand-14: rgba(15, 30, 60, 0.14);
    --overlay-brand-18: rgba(15, 30, 60, 0.18);
    --overlay-brand-20: rgba(15, 30, 60, 0.2);
    --overlay-brand-22: rgba(15, 30, 60, 0.22);
    --overlay-brand-28: rgba(15, 30, 60, 0.28);
    --overlay-brand-38: rgba(15, 30, 60, 0.38);
    --overlay-brand-50: rgba(15, 30, 60, 0.5);
    --overlay-brand-52: rgba(15, 30, 60, 0.52);
    --overlay-brand-55: rgba(15, 30, 60, 0.55);
    --overlay-brand-58: rgba(15, 30, 60, 0.58);
    --overlay-brand-62: rgba(15, 30, 60, 0.62);
    --overlay-brand-64: rgba(15, 30, 60, 0.64);
    --overlay-brand-98: rgba(15, 30, 60, 0.98);
    --overlay-accent-08: rgba(201, 162, 39, 0.08);
    --overlay-accent-09: rgba(201, 162, 39, 0.09);
    --overlay-accent-10: rgba(201, 162, 39, 0.1);
    --overlay-accent-12: rgba(201, 162, 39, 0.12);
    --overlay-accent-14: rgba(201, 162, 39, 0.14);
    --overlay-accent-16: rgba(201, 162, 39, 0.16);
    --overlay-accent-18: rgba(201, 162, 39, 0.18);
    --overlay-accent-22: rgba(201, 162, 39, 0.22);
    --overlay-accent-25: rgba(201, 162, 39, 0.25);
    --overlay-accent-28: rgba(201, 162, 39, 0.28);
    --overlay-accent-35: rgba(201, 162, 39, 0.35);
    --overlay-accent-40: rgba(201, 162, 39, 0.4);
    --overlay-accent-50: rgba(201, 162, 39, 0.5);
    --overlay-danger-06: rgba(239, 68, 68, 0.06);
    --overlay-danger-08: rgba(192, 57, 43, 0.08);
    --overlay-danger-10: rgba(239, 68, 68, 0.1);
    --overlay-danger-12: rgba(192, 57, 43, 0.12);
    --overlay-danger-14: rgba(192, 57, 43, 0.14);
    --overlay-danger-16: rgba(192, 57, 43, 0.16);
    --overlay-danger-18: rgba(192, 57, 43, 0.18);
    --overlay-danger-25: rgba(239, 68, 68, 0.25);
    --overlay-success-08: rgba(31, 143, 95, 0.08);
    --overlay-success-12: rgba(34, 197, 94, 0.12);
    --overlay-success-16: rgba(31, 143, 95, 0.16);
    --overlay-warning-15: rgba(234, 179, 8, 0.15);
    --overlay-info-12: rgba(59, 130, 246, 0.12);
    --overlay-info-15: rgba(37, 99, 235, 0.15);
    --overlay-slate-08: rgba(15, 23, 42, 0.08);
    --overlay-slate-10: rgba(15, 23, 42, 0.1);
    --overlay-slate-18: rgba(15, 23, 42, 0.18);
    --overlay-slate-25: rgba(15, 23, 42, 0.25);
    --overlay-backdrop: var(--overlay-black-50);

    --gradient-primary: linear-gradient(135deg, var(--primary-500) 0%, var(--primary-600) 100%);
    --gradient-brand: linear-gradient(135deg, var(--color-brand) 0%, var(--color-brand-900) 100%);
    --gradient-subtle: linear-gradient(135deg, var(--gray-50) 0%, var(--primary-50) 50%, var(--secondary-50) 100%);
    --gradient-hero-scrim: linear-gradient(var(--overlay-brand-52), var(--overlay-brand-62));

    /* Typography */
    --font-family-primary: "Montserrat", "Noto Sans Arabic", sans-serif;
    --font-family-secondary: "Montserrat", "Noto Sans Arabic", sans-serif;
    --font-primary: var(--font-family-primary);
    --font-arabic: "Noto Sans Arabic", sans-serif;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.875rem;
    --font-size-4xl: 2.25rem;
    --font-size-5xl: 3rem;
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    --line-height-tight: 1.25;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;

    /* Spacing scale */
    --spacing-0: 0;
    --spacing-1: 0.25rem;
    --spacing-2: 0.5rem;
    --spacing-3: 0.75rem;
    --spacing-4: 1rem;
    --spacing-5: 1.25rem;
    --spacing-6: 1.5rem;
    --spacing-7: 1.75rem;
    --spacing-8: 2rem;
    --spacing-10: 2.5rem;
    --spacing-12: 3rem;
    --spacing-16: 4rem;
    --spacing-20: 5rem;
    --spacing-24: 6rem;
    --spacing-32: 8rem;

    /* Radius scale */
    --radius-none: 0;
    --radius-sm: 0.25rem;
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;
    --radius-2xl: 1rem;
    --radius-3xl: 1.5rem;
    --radius-full: 9999px;

    /* Shadow scale */
    --shadow-sm: 0 1px 2px 0 var(--overlay-black-05);
    --shadow-md: 0 4px 6px -1px var(--overlay-black-10), 0 2px 4px -2px var(--overlay-black-10);
    --shadow-lg: 0 20px 60px var(--overlay-brand-18);
    --shadow-xl: 0 20px 25px -5px var(--overlay-black-10), 0 8px 10px -6px var(--overlay-black-10);
    --shadow-focus: 0 0 0 3px var(--overlay-accent-14);
    --shadow-accent: 0 4px 14px var(--overlay-accent-35);

    /* Z-index scale */
    --z-base: 1;
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-toast: 1090;
    --z-tooltip: 1100;

    /* Motion */
    --transition-fast: 150ms ease-in-out;
    --transition-base: 300ms ease-in-out;
    --transition-slow: 500ms ease-in-out;

    /* Controls */
    --control-height-sm: 2.25rem;
    --control-height: 2.5rem;
    --control-height-lg: 2.75rem;
    --icon-size-sm: 0.875rem;
    --icon-size: 1rem;
    --icon-size-lg: 1.25rem;
    --touch-target: 2.5rem;

    /* Layout */
    --container-max-width: 1200px;
    --container-padding: var(--spacing-4);
    --header-height: 80px;
    --card-gap: var(--spacing-5);
    --card-header-padding-block: var(--spacing-4);
    --card-header-padding-inline: var(--spacing-5);
    --layout-sidebar-width: 200px;
    --layout-sidebar-collapsed-width: 76px;
    --layout-navbar-height: 56px;
    --edesk-page-max: 1180px;
    --layout-transition-duration: 280ms;
    --layout-transition-easing: cubic-bezier(0.4, 0, 0.2, 1);
    --page-padding-block: var(--spacing-6);
    --page-padding-inline: var(--spacing-4);
    --section-gap: var(--spacing-6);

    /* Breakpoints (documentation; media queries still use literals) */
    --bp-sm: 360px;
    --bp-md: 768px;
    --bp-lg: 1024px;
    --bp-xl: 1440px;

    /* Compat aliases — mapped, do not introduce new usages */
    --navy: var(--color-brand);
    --navy-dark: var(--color-brand-900);
    --navy-mid: var(--color-brand-700);
    --navy-light: var(--color-brand-600);
    --gold: var(--color-accent);
    --gold-light: var(--color-accent-400);
    --gold-pale: var(--color-accent-100);
    --cream: var(--color-surface-muted);
    --gray-light: var(--gray-100);
    --gray-mid: var(--gray-400);
    --gray-dark: var(--gray-600);
    --green: var(--success-700);
    --red: var(--danger-700);
    --space-xs: var(--spacing-1);
    --space-sm: var(--spacing-2);
    --space-md: var(--spacing-3);
    --space-lg: var(--spacing-4);
    --space-xl: var(--spacing-6);
    --border-radius-none: var(--radius-none);
    --border-radius-sm: var(--radius-sm);
    --border-radius-base: var(--radius-sm);
    --border-radius-md: var(--radius-md);
    --border-radius-lg: var(--radius-lg);
    --border-radius-xl: var(--radius-xl);
    --border-radius-2xl: var(--radius-2xl);
    --border-radius-3xl: var(--radius-3xl);
    --border-radius-full: var(--radius-full);
    --shadow-base: var(--shadow-sm);
    --shadow-2xl: var(--shadow-xl);
    --shadow-inner: inset 0 2px 4px 0 var(--overlay-black-05);
    --shadow: var(--shadow-lg);
    --sb-bg: var(--color-surface);
    --sb-border: var(--color-border);
    --sb-text: var(--color-text);
    --sb-hover-bg: var(--color-accent-100);
    --sb-active-bg: var(--color-accent-100);
    --sb-active-text: var(--color-brand);
    --sb-section-color: var(--color-text-muted);
    --sb-width: var(--layout-sidebar-width);
    --sidebar-width: var(--layout-sidebar-width);
    --color-accent-strong: var(--color-accent-400);
    --blue-50: var(--info-50);
    --blue-100: var(--info-100);
    --blue-200: var(--info-200);
    --blue-300: var(--info-300);
    --blue-400: var(--info-400);
    --blue-500: var(--info-500);
    --blue-600: var(--info-600);
    --blue-700: var(--info-700);
    --blue-800: var(--color-brand-600);
    --blue-900: var(--info-900);
    --on-dark-muted: var(--overlay-white-45);
    --on-dark-subtle: var(--overlay-white-35);
    --on-dark-faint: var(--overlay-white-40);
    --on-dark-soft: var(--overlay-white-60);
    --on-dark-navy: var(--overlay-white-65);
    --overlay-light: var(--overlay-white-10);
    --overlay-medium: var(--overlay-black-40);
    --overlay-dark: var(--overlay-black-70);
    --overlay-primary: var(--overlay-accent-10);
    --overlay-blue: var(--overlay-brand-10);
}

[data-theme="dark"] {
    --primary-500: #e8c44a;
    --primary-600: #c9a227;
    --color-surface: #1b2532;
    --color-surface-muted: #0f1e3c;
    --color-text: #f9fafb;
    --color-text-muted: #94a3b8;
    --color-border: #334155;
}