:root {
    color-scheme: light;

    --font-body: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-display: "Manrope", var(--font-body);

    --color-bg: #f4f7fb;
    --color-surface: #ffffff;
    --color-surface-muted: #f7f9fc;
    --color-text: #111827;
    --color-text-soft: #667085;
    --color-text-faint: #98a2b3;
    --color-border: #e4e7ec;
    --color-border-strong: #d0d5dd;

    --color-primary: #635bff;
    --color-primary-hover: #5148ed;
    --color-primary-soft: rgba(99, 91, 255, 0.12);
    --color-secondary: #00a884;
    --color-secondary-soft: rgba(0, 168, 132, 0.12);
    --color-danger: #d92d20;
    --color-danger-soft: #fef3f2;
    --color-success: #039855;

    --hero-bg: #07111f;
    --hero-surface: rgba(255, 255, 255, 0.07);
    --hero-border: rgba(255, 255, 255, 0.12);
    --hero-text: #f8fafc;
    --hero-text-soft: #b9c2d0;

    --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05);
    --shadow-md: 0 10px 30px rgba(16, 24, 40, 0.08);
    --shadow-lg: 0 24px 64px rgba(7, 17, 31, 0.18);

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-xl: 28px;

    --container: 1480px;
    --header-height: 80px;
    --footer-height: 64px;
    --transition: 180ms ease;
}

html[data-theme="gray"] {
    color-scheme: light;
    --color-bg: #e5e7eb;
    --color-surface: #f9fafb;
    --color-surface-muted: #eef0f2;
    --color-text: #1f2937;
    --color-text-soft: #6b7280;
    --color-text-faint: #9aa1ab;
    --color-border: #d1d5db;
    --color-border-strong: #b8bec7;
    --color-primary: #3b82f6;
    --color-primary-hover: #2f6fe0;
    --color-primary-soft: rgba(59, 130, 246, 0.14);
}

html[data-theme="dark"] {
    color-scheme: dark;
    --color-bg: #0b1220;
    --color-surface: #111a2a;
    --color-surface-muted: #162033;
    --color-text: #f8fafc;
    --color-text-soft: #aab4c3;
    --color-text-faint: #7f8a9c;
    --color-border: #263247;
    --color-border-strong: #34425a;
    --color-primary: #8b83ff;
    --color-primary-hover: #a099ff;
    --color-primary-soft: rgba(139, 131, 255, 0.15);
    --color-danger-soft: rgba(217, 45, 32, 0.12);
    --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.24);
    --shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.34);
}