:root {
    /* Brand */
    --primary: #1F6FEB;
    --primary-dark: #164FB1;
    --primary-soft: #EAF2FF;

    --accent: #F27A21;
    --accent-dark: #D96512;
    --accent-soft: #FFF1E5;

    --charcoal: #1F1F1F;
    --charcoal-soft: #2B2F36;

    /* Base */
    --white: #FFFFFF;
    --black: #000000;

    --page-bg: #FFF9F0;
    --page-bg-soft: #F8FBFF;
    --page-surface: #FFFFFF;
    --page-surface-soft: #F7FAFF;
    --page-text: #1F1F1F;
    --page-text-soft: #526173;
    --page-muted: #7A8798;
    --page-border: #E2E8F0;

    /* Status */
    --success: #16A34A;
    --success-soft: #EAFBF0;
    --danger: #DC2626;
    --danger-soft: #FEF2F2;
    --warning: #F59E0B;
    --warning-soft: #FFF7E6;

    /* Gray */
    --gray-50: #F8FAFC;
    --gray-100: #F1F5F9;
    --gray-200: #E2E8F0;
    --gray-300: #CBD5E1;
    --gray-400: #94A3B8;
    --gray-500: #64748B;
    --gray-600: #475569;
    --gray-700: #334155;
    --gray-800: #1E293B;
    --gray-900: #0F172A;

    /* Typography */
    --font-primary: 'Manrope', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-display: 'Sora', 'Manrope', system-ui, sans-serif;
    --font-family: var(--font-primary);

    /* Font sizes */
    --text-xs: 11px;
    --text-sm: 12px;
    --text-md: 13px;
    --text-base: 14px;
    --text-lg: 16px;
    --text-xl: 20px;
    --text-2xl: 24px;
    --text-3xl: 32px;
    --text-4xl: 44px;
    --text-5xl: 60px;

    /* Spacing */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;
    --space-20: 80px;

    /* Radius */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 22px;
    --radius-2xl: 30px;
    --radius-3xl: 40px;
    --radius-full: 999px;

    /* Shadow */
    --shadow-xs: 0 4px 12px rgba(15, 23, 42, 0.04);
    --shadow-sm: 0 10px 24px rgba(15, 23, 42, 0.06);
    --shadow-md: 0 18px 44px rgba(15, 23, 42, 0.09);
    --shadow-lg: 0 30px 80px rgba(15, 23, 42, 0.12);
    --shadow-accent: 0 18px 36px rgba(242, 122, 33, 0.24);
    --shadow-primary: 0 18px 36px rgba(31, 111, 235, 0.20);

    /* Layout */
    --container: 1480px;
    --container-wide: 1560px;
    --container-padding: 48px;

    /* Gradients */
    --gradient-brand: linear-gradient(135deg, var(--accent), var(--primary));
    --gradient-cta: linear-gradient(135deg, var(--accent), #F7A044);
    --gradient-dark: linear-gradient(135deg, #111827, #263449);
    --gradient-page:
        radial-gradient(circle at 8% 8%, rgba(242, 122, 33, 0.12), transparent 28%),
        radial-gradient(circle at 92% 10%, rgba(31, 111, 235, 0.10), transparent 28%),
        linear-gradient(180deg, #FFF9F0 0%, #F8FBFF 45%, #FFFFFF 100%);
}

/* DARK MODE */
:root[data-theme="dark"] {
    --page-bg: #0B1220;
    --page-bg-soft: #101827;
    --page-surface: #111827;
    --page-surface-soft: #172033;
    --page-text: #F8FAFC;
    --page-text-soft: #CBD5E1;
    --page-muted: #94A3B8;
    --page-border: rgba(148, 163, 184, 0.18);

    --white: #111827;
    --charcoal: #F8FAFC;
    --charcoal-soft: #E2E8F0;

    --gray-50: #0F172A;
    --gray-100: #111827;
    --gray-200: #1E293B;
    --gray-300: rgba(148, 163, 184, 0.22);
    --gray-400: #64748B;
    --gray-500: #94A3B8;
    --gray-600: #CBD5E1;
    --gray-700: #E2E8F0;
    --gray-800: #F1F5F9;
    --gray-900: #F8FAFC;

    --primary-soft: rgba(31, 111, 235, 0.16);
    --accent-soft: rgba(242, 122, 33, 0.14);
    --success-soft: rgba(22, 163, 74, 0.14);
    --danger-soft: rgba(220, 38, 38, 0.14);

    --shadow-xs: 0 4px 12px rgba(0, 0, 0, 0.22);
    --shadow-sm: 0 10px 24px rgba(0, 0, 0, 0.26);
    --shadow-md: 0 18px 44px rgba(0, 0, 0, 0.32);
    --shadow-lg: 0 30px 80px rgba(0, 0, 0, 0.40);
    --shadow-accent: 0 18px 36px rgba(242, 122, 33, 0.18);
    --shadow-primary: 0 18px 36px rgba(31, 111, 235, 0.16);

    --gradient-page:
        radial-gradient(circle at 8% 8%, rgba(242, 122, 33, 0.16), transparent 28%),
        radial-gradient(circle at 92% 10%, rgba(31, 111, 235, 0.18), transparent 28%),
        linear-gradient(180deg, #0B1220 0%, #101827 48%, #0B1220 100%);
}