:root {
    color-scheme: light;
    --app-bg: #f4f8fd;
    --app-bg-soft: #e6f1fb;
    --app-surface: rgba(255, 255, 255, 0.92);
    --app-surface-strong: #ffffff;
    --app-surface-soft: #f3f9ff;
    --app-text: #0a1628;
    --app-text-soft: #5f7291;
    --app-border: rgba(10, 31, 64, 0.1);
    --app-border-strong: rgba(10, 31, 64, 0.18);
    --app-shadow: 0 18px 44px rgba(8, 30, 58, 0.1);
    --app-shadow-strong: 0 28px 68px rgba(8, 30, 58, 0.16);
    --app-shadow-soft: 0 8px 20px rgba(8, 30, 58, 0.08);
    --app-primary: #15aaf5;
    --app-primary-strong: #0b1d39;
    --app-primary-contrast: #ffffff;
    --app-primary-accent: #42c4ff;
    --app-primary-soft: rgba(21, 170, 245, 0.1);
    --app-success: #11835c;
    --app-success-soft: rgba(24, 128, 79, 0.12);
    --app-warning: #a86a00;
    --app-warning-soft: rgba(168, 106, 0, 0.14);
    --app-danger: #a52f45;
    --app-danger-soft: rgba(165, 47, 69, 0.12);
    --app-overlay: rgba(8, 15, 32, 0.52);
    --app-sidebar-bg: linear-gradient(180deg, #0b1831 0%, #112a52 100%);
    --app-sidebar-text: #edf4ff;
    --app-sidebar-border: rgba(255, 255, 255, 0.08);
    --app-sidebar-surface: rgba(255, 255, 255, 0.06);
    --app-sidebar-surface-strong: rgba(255, 255, 255, 0.12);
    --app-hero-bg: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(236, 247, 255, 0.96));
    --app-hero-text: #0b1d39;
    --app-hero-text-soft: #567291;
    --app-footer-bg: linear-gradient(180deg, #091322 0%, #0d1d37 100%);
    --app-footer-text: #edf5ff;
    --app-footer-text-soft: rgba(237, 245, 255, 0.78);
    --app-radius-sm: 16px;
    --app-radius-md: 24px;
    --app-radius-lg: 32px;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 32px;
    --space-8: 40px;
    --font-family-base: "Cairo", sans-serif;
    --font-family-heading: "Cairo", sans-serif;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    --font-size-base: 16px;
    --line-height-base: 1.7;
    --motion-fast: 160ms;
    --motion-base: 220ms;
    --motion-slow: 320ms;
    --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-top: env(safe-area-inset-top, 0px);
    --color-bg-page: var(--app-bg);
    --color-bg-surface: var(--app-surface);
    --color-bg-surface-strong: var(--app-surface-strong);
    --color-bg-surface-soft: var(--app-surface-soft);
    --color-text-primary: var(--app-text);
    --color-text-secondary: var(--app-text-soft);
    --color-border: var(--app-border);
    --color-border-strong: var(--app-border-strong);
    --color-primary: var(--app-primary);
    --color-primary-strong: var(--app-primary-strong);
    --color-primary-contrast: var(--app-primary-contrast);
    --color-success: var(--app-success);
    --color-warning: var(--app-warning);
    --color-danger: var(--app-danger);
    --shadow-sm: var(--app-shadow-soft);
    --shadow-md: var(--app-shadow);
    --shadow-lg: var(--app-shadow-strong);
}

body.theme-dark {
    color-scheme: dark;
    --app-bg: #05101e;
    --app-bg-soft: #091a2f;
    --app-surface: rgba(8, 22, 39, 0.88);
    --app-surface-strong: rgba(9, 24, 43, 0.96);
    --app-surface-soft: rgba(255, 255, 255, 0.06);
    --app-text: #edf5ff;
    --app-text-soft: #a6bdd9;
    --app-border: rgba(117, 196, 255, 0.14);
    --app-border-strong: rgba(117, 196, 255, 0.24);
    --app-shadow: 0 24px 60px rgba(0, 0, 0, 0.32);
    --app-shadow-strong: 0 28px 68px rgba(0, 0, 0, 0.4);
    --app-shadow-soft: 0 8px 20px rgba(0, 0, 0, 0.2);
    --app-primary: #42c4ff;
    --app-primary-strong: #eaf6ff;
    --app-primary-contrast: #071423;
    --app-primary-accent: #74d7ff;
    --app-primary-soft: rgba(66, 196, 255, 0.14);
    --app-success: #7fe2af;
    --app-success-soft: rgba(127, 226, 175, 0.16);
    --app-warning: #ffd27b;
    --app-warning-soft: rgba(255, 210, 123, 0.16);
    --app-danger: #ffb8c1;
    --app-danger-soft: rgba(255, 184, 193, 0.16);
    --app-overlay: rgba(2, 8, 18, 0.64);
    --app-sidebar-bg: linear-gradient(180deg, #04101f 0%, #0a1b33 100%);
    --app-sidebar-text: #edf5ff;
    --app-sidebar-border: rgba(148, 197, 255, 0.14);
    --app-sidebar-surface: rgba(255, 255, 255, 0.05);
    --app-sidebar-surface-strong: rgba(255, 255, 255, 0.12);
    --app-hero-bg: linear-gradient(145deg, rgba(7, 18, 33, 0.98), rgba(10, 25, 46, 0.96));
    --app-hero-text: #f3f8ff;
    --app-hero-text-soft: #a9c1dc;
    --app-footer-bg: linear-gradient(180deg, #040d19 0%, #091321 100%);
    --app-footer-text: #edf5ff;
    --app-footer-text-soft: rgba(237, 245, 255, 0.82);
}