/* ============================================================
   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) — Glassmorphism ---- */
:root,
[data-theme="light"] {
    --sr-primary: #007749;
    --sr-primary-hover: #15803D;
    --sr-primary-light: rgba(0,119,73,0.08);
    /* Text/icon colour to sit ON a --sr-primary fill. White works on the dark
       light-mode green; dark mode flips --sr-primary to a light mint, so the
       on-colour flips to dark green to keep contrast (see [data-theme="dark"]). */
    --sr-on-primary: #FFFFFF;
    /* Background flash for a just-published/edited row on the dashboard. */
    --sr-row-highlight-bg: rgba(0, 119, 73, 0.22);
    --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: 16px;
    --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 3px rgba(99,102,241,0.08), 0 1px 2px rgba(0,0,0,0.04);
    --sr-shadow:    0 4px 12px rgba(99,102,241,0.10), 0 1px 3px rgba(0,0,0,0.06);
    --sr-shadow-md: 0 8px 24px rgba(99,102,241,0.12), 0 2px 6px rgba(0,0,0,0.06);
    --sr-shadow-lg: 0 16px 40px rgba(99,102,241,0.14), 0 4px 8px rgba(0,0,0,0.08);
    --sr-transition: 180ms cubic-bezier(0.4, 0, 0.2, 1);
    --sr-overlay: rgba(0,0,0,0.35);

    /* Custom easing curves (easing.dev) */
    --ease-out:     cubic-bezier(0.23, 1, 0.32, 1);
    --ease-in-out:  cubic-bezier(0.77, 0, 0.175, 1);
    --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-drawer:  cubic-bezier(0.32, 0.72, 0, 1);

    color-scheme: light;

    /* Header height — used by sticky sub-bars to stick just below the nav */
    --sr-header-h: calc(60px + env(safe-area-inset-top, 0px));
    /* Breadcrumb bar height — used by sticky page sub-bars to stack below breadcrumb */
    --sr-breadcrumb-bar-h: 36px;

    /* ── Glassmorphism tokens ── */
    --sr-page-bg:      linear-gradient(135deg, #f5f3ff 0%, #ede9fe 55%, #fce7f3 100%);
    --sr-glass-bg:     rgba(255, 255, 255, 0.72);
    --sr-glass-border: rgba(255, 255, 255, 0.50);
    --sr-glass-shadow: 0 8px 32px rgba(99, 102, 241, 0.10), 0 2px 8px rgba(0,0,0,0.05);
    --sr-glass-blur:   blur(14px);

    /* ── Stat card gradient icons ── */
    --sr-grad-1: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --sr-grad-2: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    --sr-grad-3: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    --sr-grad-4: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}

/* ---- Dark mode — Dark glass variant ---- */
[data-theme="dark"] {
    --sr-primary: #34D399;
    --sr-primary-hover: #10B981;
    --sr-primary-light: rgba(52,211,153,0.12);
    /* Dark green on the light-mint primary fill (white would be ~1.8:1). */
    --sr-on-primary: #06281B;
    /* Slightly stronger in dark mode so the flash reads against the dark rows. */
    --sr-row-highlight-bg: rgba(52, 211, 153, 0.30);
    --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 3px rgba(0,0,0,0.30), 0 1px 2px rgba(0,0,0,0.20);
    --sr-shadow:    0 4px 12px rgba(0,0,0,0.35), 0 1px 4px rgba(0,0,0,0.20);
    --sr-shadow-md: 0 8px 24px rgba(0,0,0,0.40), 0 2px 6px rgba(0,0,0,0.25);
    --sr-shadow-lg: 0 16px 40px rgba(0,0,0,0.50), 0 4px 8px rgba(0,0,0,0.30);
    --sr-overlay: rgba(0,0,0,0.60);

    color-scheme: dark;

    /* ── Dark glass tokens ── */
    --sr-page-bg:      linear-gradient(135deg, #0f0c29 0%, #1a1247 50%, #1e1535 100%);
    /* Card bg uses #1E293B (surface) so it's clearly lighter than the dark page gradient */
    --sr-glass-bg:     rgba(30, 41, 59, 0.92);
    --sr-glass-border: rgba(255, 255, 255, 0.10);
    /* Neumorphic dual-shadow: dark bottom-right + lighter top-left = the visible "glow" edge
       Mirrors design file: box-shadow: 8px 8px 16px #0f172a, -8px -8px 16px #2d3e56 */
    --sr-glass-shadow:
        8px 8px 20px rgba(9, 14, 30, 0.90),
        -6px -6px 16px rgba(45, 62, 90, 0.50),
        0 0 0 1px rgba(255, 255, 255, 0.07);
    --sr-glass-blur:   blur(14px);

    /* ── Stat card gradient icons (same in dark) ── */
    --sr-grad-1: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --sr-grad-2: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    --sr-grad-3: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    --sr-grad-4: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}