/* ─────────────────────────────────────────────────────────────
   StreamVault Design Tokens — spec palette 2026-05-31
   ──────────────────────────────────────────────────────────── */

:root {
    /* Brand */
    --sv-purple:        #8B3DFF;
    --sv-green:         #7CFF3D;
    --sv-bg:            #0B0B12;
    --sv-card:          #131722;
    --sv-border:        #262B36;
    --sv-text:          #FFFFFF;
    --sv-text-muted:    #A0A7B8;
    --sv-radius:        12px;

    /* KTui semantic overrides */
    --background:          #0B0B12;
    --foreground:          #FFFFFF;
    --card:                #131722;
    --card-foreground:     #FFFFFF;
    --popover:             #131722;
    --popover-foreground:  #FFFFFF;
    --primary:             #8B3DFF;
    --primary-foreground:  #FFFFFF;
    --secondary:           #7CFF3D;
    --secondary-foreground:#0B0B12;
    --muted:               #1a1f2e;
    --muted-foreground:    #A0A7B8;
    --accent:              #1a1f2e;
    --accent-foreground:   #FFFFFF;
    --destructive:         #ef4444;
    --destructive-foreground: #FFFFFF;
    --border:              #262B36;
    --input:               #262B36;
    --ring:                #8B3DFF;
    --radius:              0.75rem;
}

.dark {
    --background:          #0B0B12;
    --foreground:          #FFFFFF;
    --card:                #131722;
    --card-foreground:     #FFFFFF;
    --popover:             #131722;
    --popover-foreground:  #FFFFFF;
    --primary:             #8B3DFF;
    --primary-foreground:  #FFFFFF;
    --secondary:           #7CFF3D;
    --secondary-foreground:#0B0B12;
    --muted:               #1a1f2e;
    --muted-foreground:    #A0A7B8;
    --accent:              #1a1f2e;
    --accent-foreground:   #FFFFFF;
    --destructive:         #ef4444;
    --destructive-foreground: #FFFFFF;
    --border:              #262B36;
    --input:               #262B36;
    --ring:                #8B3DFF;
}

/* Alpine.js: hide x-cloak elements until Alpine initializes */
[x-cloak] { display: none !important; }

/* ── Sidebar ── */
.dark #sidebar {
    background-color: #0B0B12;
    border-color: #262B36;
}

/* ── Cards ── */
.kt-card,
[class*="kt-card"] {
    border-radius: var(--sv-radius) !important;
}

/* ── Buttons ── */
.kt-btn-primary {
    background-color: var(--sv-purple) !important;
    border-color: var(--sv-purple) !important;
}

.kt-btn-primary:hover {
    background-color: #7B2FF7 !important;
    border-color: #7B2FF7 !important;
}

/* ── Utility classes ── */
.sv-badge-green {
    background-color: rgba(124, 255, 61, 0.12);
    color: #7CFF3D;
    border-radius: 6px;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 600;
}

.sv-badge-purple {
    background-color: rgba(139, 61, 255, 0.15);
    color: #8B3DFF;
    border-radius: 6px;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 600;
}

.sv-coming-soon {
    background: linear-gradient(135deg, rgba(139, 61, 255, 0.08), rgba(124, 255, 61, 0.04));
    border: 1px solid #262B36;
    border-radius: var(--sv-radius);
}