/*
 * Cuspan Pro for Booknetic — theme variables.
 *
 * The --cuspan-* custom properties are the single source of truth for theming. Panel Designer
 * (Chunk 2) injects the preset's values inline on #cuspan-pro-root (style="--cuspan-accent:..."),
 * which override these :root defaults. This file provides sensible fallbacks (the "indigo" preset)
 * plus a full dark token set applied via .cuspan-theme-dark.
 */

:root {
    /* Brand / accent */
    --cuspan-accent: #6366F1;
    --cuspan-accent-strong: #4F46E5;
    --cuspan-accent-soft: #EDE9FE;
    --cuspan-accent-contrast: #FFFFFF;

    /* Surfaces */
    --cuspan-bg: #F7F8FA;
    --cuspan-card: #FFFFFF;
    --cuspan-card-alt: #F8FAFC;
    --cuspan-sidebar-bg: #FFFFFF;

    /* Text */
    --cuspan-text: #1F2430;
    --cuspan-muted: #6B7280;
    --cuspan-subtle: #94A3B8;

    /* Lines / borders */
    --cuspan-border: #E2E8F0;
    --cuspan-border-soft: #F1F5F9;

    /* Status colors */
    --cuspan-success: #10B981;
    --cuspan-success-soft: #ECFDF5;
    --cuspan-success-text: #047857;
    --cuspan-warning: #F59E0B;
    --cuspan-warning-soft: #FFFBEB;
    --cuspan-warning-text: #B45309;
    --cuspan-danger: #EF4444;
    --cuspan-danger-soft: #FEF2F2;
    --cuspan-danger-text: #DC2626;
    --cuspan-danger-border: #FECACA;

    /* Shape */
    --cuspan-radius: 12px;
    --cuspan-radius-sm: 8px;
    --cuspan-radius-lg: 16px;
    --cuspan-radius-pill: 9999px;

    /* Elevation */
    --cuspan-shadow-sm: 0 1px 2px 0 rgba(15, 23, 42, 0.05);
    --cuspan-shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.08), 0 2px 4px -2px rgba(15, 23, 42, 0.05);
    --cuspan-shadow-lg: 0 10px 25px -5px rgba(99, 102, 241, 0.18);

    /* Layout */
    --cuspan-sidebar-width: 256px;
    --cuspan-content-max: 1024px;

    /* Typography */
    --cuspan-font: 'Inter', 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --cuspan-font-heading: 'Plus Jakarta Sans', 'Inter', sans-serif;
}

/* ---- Dark mode (applied when the chosen preset's is_dark flag is true, e.g. Midnight) ---- */
.cuspan-theme-dark {
    --cuspan-accent: #818CF8;
    --cuspan-accent-strong: #6366F1;
    --cuspan-accent-soft: rgba(129, 140, 248, 0.15);
    --cuspan-accent-contrast: #0F1115;

    --cuspan-bg: #0F1115;
    --cuspan-card: #181B22;
    --cuspan-card-alt: #1F232C;
    --cuspan-sidebar-bg: #15181F;

    --cuspan-text: #E5E7EB;
    --cuspan-muted: #9CA3AF;
    --cuspan-subtle: #6B7280;

    --cuspan-border: #2A2F3A;
    --cuspan-border-soft: #232831;

    --cuspan-success: #34D399;
    --cuspan-success-soft: rgba(16, 185, 129, 0.12);
    --cuspan-success-text: #6EE7B7;
    --cuspan-warning: #FBBF24;
    --cuspan-warning-soft: rgba(245, 158, 11, 0.12);
    --cuspan-warning-text: #FCD34D;
    --cuspan-danger: #F87171;
    --cuspan-danger-soft: rgba(239, 68, 68, 0.12);
    --cuspan-danger-text: #FCA5A5;
    --cuspan-danger-border: rgba(248, 113, 113, 0.35);

    --cuspan-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
    --cuspan-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.45), 0 2px 4px -2px rgba(0, 0, 0, 0.4);
    --cuspan-shadow-lg: 0 10px 25px -5px rgba(0, 0, 0, 0.55);
}