/* ============================================================
   DataBridge — Purple & White Design System
   Single source of truth for all design tokens.
   Light mode = :root, Dark mode = [data-theme="dark"]
   ============================================================ */

/* ── Light Mode (default) ───────────────────────────────────── */
:root {
    /* Primary purple palette */
    --primary:            #7c3aed;
    --primary-light:      #a78bfa;
    --primary-dark:       #5b21b6;
    --primary-subtle:     #ede9fe;
    --primary-rgb:        124, 58, 237;

    /* Accent */
    --accent:             #8b5cf6;
    --accent-light:       #c4b5fd;

    /* Backgrounds */
    --bg-body:            #f8f7fc;
    --bg-surface:         #ffffff;
    --bg-surface-alt:     #f3f0ff;
    --bg-muted:           #f1eff9;

    /* Text */
    --text-primary:       #1e1b4b;
    --text-secondary:     #4c4574;
    --text-muted:         #6b7280;
    --text-inverse:       #ffffff;

    /* Borders */
    --border-color:       #e5e1f5;
    --border-light:       #ede9fe;

    /* Semantic */
    --success:            #10b981;
    --success-bg:         #ecfdf5;
    --warning:            #f59e0b;
    --warning-bg:         #fffbeb;
    --danger:             #ef4444;
    --danger-bg:          #fef2f2;
    --info:               #3b82f6;
    --info-bg:            #eff6ff;

    /* Shadows */
    --shadow-sm:          0 1px 3px rgba(124, 58, 237, 0.06), 0 1px 2px rgba(0,0,0,0.04);
    --shadow-md:          0 4px 12px rgba(124, 58, 237, 0.08), 0 2px 4px rgba(0,0,0,0.04);
    --shadow-lg:          0 8px 24px rgba(124, 58, 237, 0.12), 0 4px 8px rgba(0,0,0,0.06);
    --shadow-glow:        0 0 20px rgba(124, 58, 237, 0.15);

    /* Gradients */
    --gradient-primary:   linear-gradient(135deg, #7c3aed 0%, #a78bfa 100%);
    --gradient-header:    linear-gradient(135deg, #7c3aed 0%, #6d28d9 50%, #5b21b6 100%);
    --gradient-hero:      linear-gradient(135deg, #ede9fe 0%, #f3f0ff 50%, #faf5ff 100%);

    /* Radii */
    --radius-sm:          6px;
    --radius-md:          10px;
    --radius-lg:          14px;
    --radius-xl:          20px;

    /* Transitions */
    --transition-fast:    0.15s ease;
    --transition-normal:  0.25s ease;
    --transition-slow:    0.35s ease;

    /* Navbar */
    --navbar-bg:          rgba(255, 255, 255, 0.85);
    --navbar-border:      rgba(124, 58, 237, 0.1);
    --navbar-text:        #4c4574;
    --navbar-hover:       #7c3aed;
    --navbar-active-bg:   #ede9fe;

    /* Footer */
    --footer-bg:          #ffffff;
    --footer-border:      #e5e1f5;

    /* Forms */
    --input-bg:           #ffffff;
    --input-border:       #d4d0e8;
    --input-focus-border: #a78bfa;
    --input-focus-ring:   rgba(124, 58, 237, 0.25);

    /* Tables */
    --table-header-bg:    #f3f0ff;
    --table-header-text:  #4c4574;
    --table-stripe-bg:    #faf8ff;
    --table-hover-bg:     #f3f0ff;

    /* Cards */
    --card-bg:            #ffffff;
    --card-border:        #e5e1f5;

    /* Terminal / code areas */
    --terminal-bg:        #1a1a2e;
    --terminal-text:      #e2e8f0;
}

/* ── Dark Mode ──────────────────────────────────────────────── */
[data-theme="dark"] {
    --primary:            #a78bfa;
    --primary-light:      #c4b5fd;
    --primary-dark:       #7c3aed;
    --primary-subtle:     #2e1065;
    --primary-rgb:        167, 139, 250;

    --accent:             #8b5cf6;
    --accent-light:       #6d28d9;

    --bg-body:            #0f0d1a;
    --bg-surface:         #1a1730;
    --bg-surface-alt:     #221f38;
    --bg-muted:           #1e1b32;

    --text-primary:       #f1f0f9;
    --text-secondary:     #c4b5fd;
    --text-muted:         #9ca3af;
    --text-inverse:       #0f0d1a;

    --border-color:       #2e2a4a;
    --border-light:       #3b365e;

    --success-bg:         #052e16;
    --warning-bg:         #451a03;
    --danger-bg:          #450a0a;
    --info-bg:            #172554;

    --shadow-sm:          0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-md:          0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-lg:          0 8px 24px rgba(0, 0, 0, 0.5);
    --shadow-glow:        0 0 20px rgba(167, 139, 250, 0.2);

    --gradient-primary:   linear-gradient(135deg, #7c3aed 0%, #a78bfa 100%);
    --gradient-header:    linear-gradient(135deg, #6d28d9 0%, #7c3aed 50%, #8b5cf6 100%);
    --gradient-hero:      linear-gradient(135deg, #1a1730 0%, #221f38 50%, #2e1065 100%);

    --navbar-bg:          rgba(15, 13, 26, 0.9);
    --navbar-border:      rgba(167, 139, 250, 0.15);
    --navbar-text:        #c4b5fd;
    --navbar-hover:       #a78bfa;
    --navbar-active-bg:   #2e1065;

    --footer-bg:          #1a1730;
    --footer-border:      #2e2a4a;

    --input-bg:           #1a1730;
    --input-border:       #3b365e;
    --input-focus-border: #7c3aed;
    --input-focus-ring:   rgba(124, 58, 237, 0.35);

    --table-header-bg:    #221f38;
    --table-header-text:  #c4b5fd;
    --table-stripe-bg:    #1e1b32;
    --table-hover-bg:     #2e1065;

    --card-bg:            #1a1730;
    --card-border:        #2e2a4a;

    --terminal-bg:        #0d0b18;
    --terminal-text:      #e2e8f0;
}