/* ============================================================
   KloudSync Pty Ltd — CSS Custom Properties & Theme Tokens
   All theme switching relies on variables defined here.
   This file MUST be the first stylesheet loaded on every page.
   ============================================================ */

:root {
    --primary-blue: #0EA5E9;
    --dark-bg: #1E293B;
    --darker-bg: #0F172A;
    --card-bg: #334155;
    --text-white: #F8FAFC;
    --text-gray: #CBD5E1;
    --border-color: #475569;
    --accent-cyan: #06B6D4;
}

[data-theme="light"] {
    --dark-bg: #E2E8F0;
    --darker-bg: #F1F5F9;
    --card-bg: #FFFFFF;
    --text-white: #0F172A;
    --text-gray: #475569;
    --border-color: #CBD5E1;
}

[data-theme="light"] .form-group input,
[data-theme="light"] .form-group textarea {
    background: #FFFFFF;
    color: #0F172A;
}

[data-theme="light"] .form-group input::placeholder,
[data-theme="light"] .form-group textarea::placeholder {
    color: #94A3B8;
}

[data-theme="light"] .hero::before {
    background: radial-gradient(circle, rgba(14, 165, 233, 0.1) 0%, transparent 70%);
}

[data-theme="light"] .service-card::before {
    background: linear-gradient(90deg, transparent, rgba(14, 165, 233, 0.07), transparent);
}