:root {
    color-scheme: light;

    /* DentyCore brand */
    --brand-primary: #2563eb;
    --brand-primary-hover: #1d4ed8;
    --brand-primary-active: #1e40af;
    --brand-secondary: #06b6d4;
    --brand-navy: #0f172a;
    --brand-slate: #64748b;
    --brand-white: #ffffff;
    --brand-gradient: linear-gradient(135deg, #2563eb 0%, #06b6d4 100%);

    /* Light theme */
    --background: #f8fafc;
    --surface: #ffffff;
    --surface-raised: #ffffff;
    --surface-muted: #f1f5f9;
    --surface-hover: #f1f5f9;
    --text-primary: #0f172a;
    --text-secondary: #64748b;
    --text-muted: #94a3b8;
    --text-on-primary: #ffffff;
    --border: #e2e8f0;
    --border-strong: #cbd5e1;
    --input-border: #cbd5e1;
    --overlay: rgb(15 23 42 / 48%);
    --primary: var(--brand-primary);
    --primary-hover: var(--brand-primary-hover);
    --secondary: var(--brand-secondary);

    /* Semantic colors */
    --success: #16a34a;
    --success-surface: #f0fdf4;
    --success-text: #166534;
    --success-border: #bbf7d0;
    --warning: #f59e0b;
    --warning-surface: #fffbeb;
    --warning-text: #92400e;
    --warning-border: #fde68a;
    --danger: #dc2626;
    --danger-hover: #b91c1c;
    --danger-surface: #fef2f2;
    --danger-text: #991b1b;
    --danger-border: #fecaca;
    --info: #2563eb;
    --info-surface: #eff6ff;
    --info-text: #1e40af;
    --info-border: #bfdbfe;
    --neutral: #64748b;
    --neutral-surface: #f1f5f9;
    --neutral-text: #475569;
    --neutral-border: #cbd5e1;

    /* Typography */
    --font-arabic: "Tajawal", "Segoe UI", sans-serif;
    --font-english: "Inter", "Segoe UI", sans-serif;
    --font-ui: var(--font-arabic);
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --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;
    --line-height-tight: 1.25;
    --line-height-heading: 1.35;
    --line-height-body: 1.65;

    /* Four-pixel spacing scale */
    --space-0: 0;
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;

    /* Shape and elevation */
    --radius-sm: 0.375rem;
    --radius-control: 9px;
    --radius-card: 14px;
    --radius-lg: 1rem;
    --radius-pill: 999px;
    --control-height-sm: 40px;
    --control-height: 42px;
    --control-height-lg: 44px;
    --shadow-xs: 0 1px 2px rgb(15 23 42 / 4%);
    --shadow-sm: 0 2px 8px rgb(15 23 42 / 6%);
    --shadow-md: 0 8px 24px rgb(15 23 42 / 9%);
    --focus-ring: 0 0 0 3px rgb(37 99 235 / 18%);

    /* Motion and layers */
    --duration-fast: 120ms;
    --duration-normal: 200ms;
    --duration-slow: 300ms;
    --ease-standard: cubic-bezier(0.2, 0, 0, 1);
    --transition-colors: color var(--duration-normal) var(--ease-standard),
        background-color var(--duration-normal) var(--ease-standard),
        border-color var(--duration-normal) var(--ease-standard),
        box-shadow var(--duration-normal) var(--ease-standard);
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-toast: 1080;
    --z-tooltip: 1090;
}

html[lang^="ar"],
html[dir="rtl"] {
    --font-ui: var(--font-arabic);
}

html[lang^="en"],
html[dir="ltr"] {
    --font-ui: var(--font-english);
}

html.dark {
    color-scheme: dark;
    --background: #0b1220;
    --surface: #111c2e;
    --surface-raised: #17233a;
    --surface-muted: #17233a;
    --surface-hover: #1d2b45;
    --text-primary: #f8fafc;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;
    --border: #27364d;
    --border-strong: #334155;
    --input-border: #334155;
    --overlay: rgb(2 6 23 / 70%);
    --success-surface: #122d22;
    --success-text: #86efac;
    --success-border: #23613a;
    --warning-surface: #33270e;
    --warning-text: #fcd34d;
    --warning-border: #674d13;
    --danger-surface: #35191d;
    --danger-text: #fca5a5;
    --danger-border: #6b252a;
    --info-surface: #14264a;
    --info-text: #93c5fd;
    --info-border: #26477e;
    --neutral-surface: #17233a;
    --neutral-text: #cbd5e1;
    --neutral-border: #334155;
    --shadow-xs: 0 1px 2px rgb(0 0 0 / 18%);
    --shadow-sm: 0 2px 8px rgb(0 0 0 / 20%);
    --shadow-md: 0 8px 24px rgb(0 0 0 / 24%);
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --duration-fast: 0ms;
        --duration-normal: 0ms;
        --duration-slow: 0ms;
    }
}