/*
 * BrightSaaS Theme Variables
 * Centralized design tokens mapped from appb350.css BrightSaaS design system.
 * Applied when body carries class: dark_mode
 * ──────────────────────────────────────────────────────────────────────────
 * Palette Reference (BrightSaaS dark theme):
 *   --bs-background-dark : #020617  (deepest bg)
 *   --bs-background      : #0f172a  (main bg)
 *   --bs-light           : #1e293b  (surface / card bg)
 *   --bs-lighter         : #475569  (border / muted surface)
 *   --bs-primary         : #6366f1  (indigo accent)
 *   --bs-primary-light   : #a5b4fc  (lighter indigo)
 *   --bs-title           : #d5dcf2  (heading text)
 *   --bs-content         : #8f9bbf  (body text)
 *   --bs-muted           : #606880  (muted text)
 */

:root {
    /* ── Page backgrounds ────────────────────────────────────── */
    --bs-bg-deepest:          #020617;
    --bs-bg-main:             #0f172a;
    --bs-bg-surface:          #1e293b;
    --bs-bg-surface-alt:      #0f172a;
    --bs-bg-raised:           #16213a;

    /* ── Accent / interactive ────────────────────────────────── */
    --bs-accent:              #6366f1;
    --bs-accent-light:        #a5b4fc;
    --bs-accent-dark:         #4338ca;
    --bs-accent-glow:         rgba(99, 102, 241, 0.18);
    --bs-accent-glow-hover:   rgba(99, 102, 241, 0.30);

    /* ── Typography ──────────────────────────────────────────── */
    --bs-text-heading:        #d5dcf2;
    --bs-text-body:           #8f9bbf;
    --bs-text-muted:          #606880;
    --bs-text-white:          #ffffff;
    --bs-font-family:         'inter', "Inter", -apple-system, "Segoe UI", system-ui, sans-serif;
    --bs-font-size-base:      0.875rem;
    --bs-line-height:         1.714;
    --bs-font-weight-normal:  400;
    --bs-font-weight-medium:  500;
    --bs-font-weight-semibold:600;
    --bs-font-weight-bold:    700;

    /* ── Borders ─────────────────────────────────────────────── */
    --bs-border-color:        #1e293b;
    --bs-border-color-light:  rgba(71, 85, 105, 0.4);
    --bs-border-radius:       0.5rem;
    --bs-border-radius-lg:    1rem;
    --bs-border-radius-xl:    1.5rem;
    --bs-border-radius-pill:  50rem;

    /* ── Shadows ─────────────────────────────────────────────── */
    --bs-shadow-sm:           0 1px 3px rgba(0, 0, 0, 0.4);
    --bs-shadow:              0 4px 16px rgba(0, 0, 0, 0.5);
    --bs-shadow-lg:           0 8px 32px rgba(0, 0, 0, 0.6);
    --bs-shadow-glow:         0 0 20px rgba(99, 102, 241, 0.25);

    /* ── Gradients ───────────────────────────────────────────── */
    --bs-gradient-heading:    linear-gradient(135deg, #a5b4fc 0%, #d5dcf2 100%);
    --bs-gradient-accent:     linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    --bs-gradient-surface:    linear-gradient(135deg, #1e293b 0%, #0f172a 100%);

    /* ── Forms ───────────────────────────────────────────────── */
    --bs-input-bg:            rgba(0, 0, 0, 0.2);
    --bs-input-border:        rgba(71, 85, 105, 0.5);
    --bs-input-border-focus:  rgba(165, 180, 252, 0.7);
    --bs-input-text:          #d5dcf2;
    --bs-input-placeholder:   #606880;
    --bs-input-shadow-focus:  0 0 0 3px rgba(99, 102, 241, 0.3);

    /* ── Scrollbar ───────────────────────────────────────────── */
    --bs-scrollbar-track:     #0f172a;
    --bs-scrollbar-thumb:     #2d3d5a;
    --bs-scrollbar-thumb-hover: #475569;

    /* ── Animation timings ───────────────────────────────────── */
    --bs-transition-fast:     0.15s ease;
    --bs-transition-base:     0.25s ease;
    --bs-transition-slow:     0.4s ease;
    --bs-transition-spring:   0.5s cubic-bezier(0.19, 1, 0.22, 1);
}