/* ─── CSS Custom Properties (Themeable via WP settings) ───────────────────── */

/* ── Dark mode (default) ──────────────────────────────────────────────────── */

:root {
    --noon-accent: #6366f1;
    --noon-accent-rgb: 99, 102, 241;
    --noon-accent-hover: #4f46e5;
    --noon-accent-light: rgba(var(--noon-accent-rgb), 0.1);
    --noon-bg: #16161e;
    --noon-bg-card: #20202a;
    --noon-bg-card-hover: #292936;
    --noon-bg-elevated: #2f2f3d;
    --noon-text: #f0f0f5;
    --noon-text-secondary: #9ca3af;
    --noon-text-muted: #6b7280;
    --noon-border: rgba(255, 255, 255, 0.12);
    --noon-border-focus: rgba(var(--noon-accent-rgb), 0.5);
    --noon-success: #10b981;
    --noon-warning: #f59e0b;
    --noon-danger: #ef4444;
    --noon-radius: 16px;
    --noon-radius-sm: 10px;
    --noon-radius-xs: 6px;
    --noon-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    --noon-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2);
    --noon-transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --noon-font:
        "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --noon-max-width: 640px;
}

/* ── Glass mode (opt-in via admin setting, dark mode only) ────────────────── */

.glassMode {
    --noon-bg: #16161e8a;
    --noon-bg-card: #20202a;
    --noon-bg-card-hover: #292936;
    --noon-bg-elevated: #2f2f3d;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* ── Light mode (opt-in only via Pro "Force Light" setting) ───────────────── */
/* Auto-detect via prefers-color-scheme is intentionally NOT used because  */
/* this widget is embedded inside sites with their own themes. Dark is the */
/* default; light activates only via data-noon-theme="light".              */

/* ── Forced dark (via data attribute) ─────────────────────────────────────── */

[data-noon-theme="dark"] {
    --noon-bg: #0f0f14;
    --noon-bg-card: #1a1a24;
    --noon-bg-card-hover: #22223a;
    --noon-bg-elevated: #252538;
    --noon-text: #f0f0f5;
    --noon-text-secondary: #9ca3af;
    --noon-text-muted: #6b7280;
    --noon-border: rgba(255, 255, 255, 0.08);
    --noon-border-focus: rgba(var(--noon-accent-rgb), 0.5);
    --noon-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    --noon-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* ── Forced light (via data attribute) ────────────────────────────────────── */

[data-noon-theme="light"] {
    --noon-bg: #f8f9fb;
    --noon-bg-card: #ffffff;
    --noon-bg-card-hover: #f1f3f9;
    --noon-bg-elevated: #e9ecf2;
    --noon-text: #1a1d27;
    --noon-text-secondary: #4b5563;
    --noon-text-muted: #9ca3af;
    --noon-border: rgba(0, 0, 0, 0.1);
    --noon-border-focus: rgba(var(--noon-accent-rgb), 0.4);
    --noon-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
    --noon-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
}