/**
 * ESports Cam PRO — Electric Blue Design System
 * Tokens + base components. Load once, use everywhere via var(--ecm-*)
 */

:root {
    /* ── Electric Blues ── */
    --ecm-blue-50:  #EFF6FF;
    --ecm-blue-100: #DBEAFE;
    --ecm-blue-200: #BFDBFE;
    --ecm-blue-300: #93C5FD;
    --ecm-blue-400: #60A5FA;
    --ecm-blue-500: #3B82F6;   /* primary */
    --ecm-blue-600: #2563EB;
    --ecm-blue-700: #1D4ED8;
    --ecm-blue-800: #1E3A8A;
    --ecm-blue-900: #0C1F5C;

    --ecm-cyan-400: #22D3EE;   /* electric glow accent */
    --ecm-cyan-500: #06B6D4;

    /* ── Neutrals (light mode default) ── */
    --ecm-bg:           #F5F7FB;   /* page bg */
    --ecm-bg-elevated:  #FFFFFF;   /* cards */
    --ecm-bg-subtle:    #EEF2F8;   /* disabled, inputs bg */
    --ecm-border:       #E2E8F0;
    --ecm-border-strong:#CBD5E1;
    --ecm-text:         #0F172A;   /* primary text */
    --ecm-text-muted:   #475569;
    --ecm-text-subtle:  #94A3B8;
    --ecm-text-inverse: #FFFFFF;

    /* ── Semantic ── */
    --ecm-primary:        var(--ecm-blue-500);
    --ecm-primary-hover:  var(--ecm-blue-600);
    --ecm-primary-active: var(--ecm-blue-700);
    --ecm-success:        #10B981;
    --ecm-warning:        #F59E0B;
    --ecm-danger:         #EF4444;
    --ecm-danger-hover:   #DC2626;

    /* ── Radius (rounded, elegant) ── */
    --ecm-radius-xs:   6px;
    --ecm-radius-sm:   10px;
    --ecm-radius-md:   14px;
    --ecm-radius-lg:   20px;
    --ecm-radius-xl:   28px;
    --ecm-radius-pill: 999px;

    /* ── Spacing ── */
    --ecm-space-1: 4px;
    --ecm-space-2: 8px;
    --ecm-space-3: 12px;
    --ecm-space-4: 16px;
    --ecm-space-5: 20px;
    --ecm-space-6: 24px;
    --ecm-space-8: 32px;
    --ecm-space-10: 40px;
    --ecm-space-12: 48px;

    /* ── Shadows (subtle, elegant) ── */
    --ecm-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
    --ecm-shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
    --ecm-shadow-md: 0 4px 12px rgba(15, 23, 42, 0.06), 0 2px 4px rgba(15, 23, 42, 0.04);
    --ecm-shadow-lg: 0 12px 28px rgba(15, 23, 42, 0.08), 0 4px 10px rgba(15, 23, 42, 0.05);
    --ecm-shadow-xl: 0 24px 48px rgba(15, 23, 42, 0.12);
    --ecm-glow:      0 0 0 4px rgba(59, 130, 246, 0.12);
    --ecm-glow-strong: 0 0 0 4px rgba(59, 130, 246, 0.25), 0 8px 24px rgba(59, 130, 246, 0.25);

    /* ── Motion ── */
    --ecm-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --ecm-dur-fast:   150ms;
    --ecm-dur-normal: 220ms;
    --ecm-dur-slow:   320ms;

    /* ── Typography ── */
    --ecm-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    --ecm-font-mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace;
}

/* ─── Dark mode overrides ─── */
[data-theme="dark"] {
    --ecm-bg:           #0A0F1E;
    --ecm-bg-elevated:  #131A2E;
    --ecm-bg-subtle:    #1A2238;
    --ecm-border:       #1F2A44;
    --ecm-border-strong:#2D3A5C;
    --ecm-text:         #E7ECF3;
    --ecm-text-muted:   #94A3B8;
    --ecm-text-subtle:  #64748B;
    --ecm-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
    --ecm-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35);
    --ecm-shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.45);
    --ecm-shadow-xl: 0 24px 48px rgba(0, 0, 0, 0.5);
}

/* ─── Reusable components ─── */

/* Button */
.ecm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ecm-space-2);
    padding: 10px 18px;
    border: none;
    border-radius: var(--ecm-radius-sm);
    font-family: var(--ecm-font);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.01em;
    cursor: pointer;
    transition: transform var(--ecm-dur-fast) var(--ecm-ease),
                background var(--ecm-dur-fast) var(--ecm-ease),
                box-shadow var(--ecm-dur-fast) var(--ecm-ease),
                opacity var(--ecm-dur-fast) var(--ecm-ease);
    white-space: nowrap;
    line-height: 1;
}
.ecm-btn:focus-visible {
    outline: none;
    box-shadow: var(--ecm-glow);
}
.ecm-btn:active { transform: scale(0.97); }
.ecm-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

.ecm-btn-primary {
    background: var(--ecm-primary);
    color: var(--ecm-text-inverse);
    box-shadow: 0 1px 2px rgba(59, 130, 246, 0.2);
}
.ecm-btn-primary:hover:not(:disabled) {
    background: var(--ecm-primary-hover);
    box-shadow: 0 6px 16px rgba(59, 130, 246, 0.35);
}
.ecm-btn-primary:active:not(:disabled) {
    background: var(--ecm-primary-active);
}

.ecm-btn-secondary {
    background: var(--ecm-bg-elevated);
    color: var(--ecm-text);
    border: 1px solid var(--ecm-border);
}
.ecm-btn-secondary:hover:not(:disabled) {
    background: var(--ecm-bg-subtle);
    border-color: var(--ecm-border-strong);
}

.ecm-btn-ghost {
    background: transparent;
    color: var(--ecm-primary);
}
.ecm-btn-ghost:hover:not(:disabled) {
    background: var(--ecm-blue-50);
}

.ecm-btn-danger {
    background: var(--ecm-danger);
    color: var(--ecm-text-inverse);
}
.ecm-btn-danger:hover:not(:disabled) {
    background: var(--ecm-danger-hover);
}

.ecm-btn-lg { padding: 14px 24px; font-size: 16px; border-radius: var(--ecm-radius-md); }
.ecm-btn-sm { padding: 6px 12px; font-size: 13px; }
.ecm-btn-block { width: 100%; }

/* Card */
.ecm-card {
    background: var(--ecm-bg-elevated);
    border: 1px solid var(--ecm-border);
    border-radius: var(--ecm-radius-lg);
    box-shadow: var(--ecm-shadow-sm);
    padding: var(--ecm-space-6);
}

.ecm-card-glow {
    border: 1px solid var(--ecm-blue-200);
    box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.1), 0 8px 32px rgba(59, 130, 246, 0.08);
}

/* Input */
.ecm-input {
    width: 100%;
    padding: 12px 14px;
    background: var(--ecm-bg-elevated);
    border: 1px solid var(--ecm-border);
    border-radius: var(--ecm-radius-sm);
    font-family: var(--ecm-font);
    font-size: 15px;
    color: var(--ecm-text);
    transition: border-color var(--ecm-dur-fast) var(--ecm-ease),
                box-shadow var(--ecm-dur-fast) var(--ecm-ease);
    letter-spacing: -0.01em;
}
.ecm-input::placeholder { color: var(--ecm-text-subtle); }
.ecm-input:focus {
    outline: none;
    border-color: var(--ecm-primary);
    box-shadow: var(--ecm-glow);
}
.ecm-input:disabled {
    background: var(--ecm-bg-subtle);
    cursor: not-allowed;
    opacity: 0.6;
}

/* Label */
.ecm-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--ecm-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: var(--ecm-space-2);
}

/* Badge */
.ecm-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--ecm-space-1);
    padding: 3px 10px;
    font-size: 12px;
    font-weight: 600;
    border-radius: var(--ecm-radius-pill);
    background: var(--ecm-blue-100);
    color: var(--ecm-blue-700);
    letter-spacing: 0.01em;
}
.ecm-badge-success { background: #D1FAE5; color: #065F46; }
.ecm-badge-danger  { background: #FEE2E2; color: #991B1B; }
.ecm-badge-warn    { background: #FEF3C7; color: #92400E; }

/* Divider */
.ecm-divider {
    height: 1px;
    background: var(--ecm-border);
    margin: var(--ecm-space-6) 0;
    border: none;
}

/* Focus ring utility */
.ecm-ring:focus-visible {
    outline: none;
    box-shadow: var(--ecm-glow);
}

/* Animations */
@keyframes ecmFadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.ecm-fade-in { animation: ecmFadeIn var(--ecm-dur-normal) var(--ecm-ease); }

/* Subtle gradient bg for hero sections */
.ecm-bg-hero {
    background:
        radial-gradient(ellipse at top left,  rgba(59, 130, 246, 0.08), transparent 50%),
        radial-gradient(ellipse at bottom right, rgba(34, 211, 238, 0.05), transparent 50%),
        var(--ecm-bg);
}