/* ============================================================
   Surveyz — CSS Variables + Dark/Light Theme System
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* ---- Light mode (default) ---- */
:root,
[data-theme="light"] {
    --sr-primary: #007749;
    --sr-primary-hover: #15803D;
    --sr-primary-light: rgba(0,119,73,0.08);
    --sr-secondary: #FFB81C;
    --sr-bg: #FFFFFF;
    --sr-surface: #F8FAFC;
    --sr-text: #0F172A;
    --sr-text-secondary: #475569;
    --sr-text-muted: #94A3B8;
    --sr-border: #E2E8F0;
    --sr-border-focus: #007749;
    --sr-radius: 10px;
    --sr-radius-lg: 14px;
    --sr-radius-sm: 6px;
    --sr-font: 'Inter', system-ui, -apple-system, sans-serif;

    --sr-success: #059669;
    --sr-success-light: #ECFDF5;
    --sr-warning: #D97706;
    --sr-warning-light: #FFFBEB;
    --sr-danger: #DC2626;
    --sr-danger-light: #FEF2F2;

    --sr-shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
    --sr-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
    --sr-shadow-md: 0 4px 6px -1px rgba(0,0,0,0.08), 0 2px 4px -2px rgba(0,0,0,0.05);
    --sr-shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -4px rgba(0,0,0,0.04);
    --sr-transition: 180ms cubic-bezier(0.4, 0, 0.2, 1);
    --sr-overlay: rgba(0,0,0,0.35);

    color-scheme: light;
}

/* ---- Dark mode ---- */
[data-theme="dark"] {
    --sr-primary: #34D399;
    --sr-primary-hover: #10B981;
    --sr-primary-light: rgba(52,211,153,0.12);
    --sr-secondary: #FBBF24;
    --sr-bg: #0F172A;
    --sr-surface: #1E293B;
    --sr-text: #F1F5F9;
    --sr-text-secondary: #94A3B8;
    --sr-text-muted: #64748B;
    --sr-border: #334155;
    --sr-border-focus: #34D399;

    --sr-success: #34D399;
    --sr-success-light: rgba(52,211,153,0.12);
    --sr-warning: #FBBF24;
    --sr-warning-light: rgba(251,191,36,0.12);
    --sr-danger: #F87171;
    --sr-danger-light: rgba(248,113,113,0.1);

    --sr-shadow-sm: 0 1px 2px rgba(0,0,0,0.2);
    --sr-shadow: 0 1px 3px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.2);
    --sr-shadow-md: 0 4px 6px -1px rgba(0,0,0,0.3), 0 2px 4px -2px rgba(0,0,0,0.2);
    --sr-shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.4), 0 4px 6px -4px rgba(0,0,0,0.3);
    --sr-overlay: rgba(0,0,0,0.6);

    color-scheme: dark;
}