/**
 * NetShow.AI Brand Design System
 * Version: 1.0.0
 * Created: 2026-03-10
 *
 * Brand: Dark Electric Blue + Purple — extracted from landing.blade.php
 * This is the ONE source of truth for the NetShow.AI visual identity.
 *
 * Usage:
 *   <link rel="stylesheet" href="{{ asset('css/netshow-design-system.css') }}">
 *   Then use CSS variables or utility classes below.
 */

/* ============================================================
 * BRAND COLOR TOKENS
 * Source: landing.blade.php :root block (lines 71-83)
 * ============================================================ */
:root {
    /* ── Backgrounds ────────────────────────────────────── */
    --ns-bg-primary:    #080810;   /* deepest background — main page bg   */
    --ns-bg-secondary:  #0f0f1a;   /* --ns-surface from landing           */
    --ns-bg-card:       #161625;   /* --ns-surface2 — card interiors      */
    --ns-bg-elevated:   #1e1e35;   /* same as border — elevated panels    */

    /* ── Accents ─────────────────────────────────────────── */
    --ns-accent-blue:   #3b82f6;   /* electric blue — primary CTA         */
    --ns-accent-purple: #8b5cf6;   /* purple — secondary accent           */
    --ns-accent-green:  #10b981;   /* emerald — success / live indicators */
    --ns-accent-cyan:   #06b6d4;   /* cyan — hear/audio sense             */

    /* ── Glow variants (for box-shadow) ─────────────────── */
    --ns-blue-glow:     rgba(59, 130, 246, 0.25);
    --ns-purple-glow:   rgba(139, 92, 246, 0.25);
    --ns-blue-glow-strong: rgba(59, 130, 246, 0.50);

    /* ── Text ────────────────────────────────────────────── */
    --ns-text-primary:  #e8e8f0;   /* --ns-text — body text               */
    --ns-text-secondary:#c4c4d8;   /* slightly dimmer body text           */
    --ns-text-muted:    #7070a0;   /* --ns-dim — captions, meta, labels   */
    --ns-text-inverse:  #ffffff;   /* on coloured backgrounds             */

    /* ── Borders ─────────────────────────────────────────── */
    --ns-border:        #1e1e35;   /* default card / section divider      */
    --ns-border-blue:   rgba(59, 130, 246, 0.40);
    --ns-border-purple: rgba(139, 92, 246, 0.40);
    --ns-border-subtle: rgba(255, 255, 255, 0.06);

    /* ── Gradients ───────────────────────────────────────── */
    --ns-gradient-primary: linear-gradient(90deg, #3b82f6, #8b5cf6);
    --ns-gradient-left:    linear-gradient(135deg, #1e3a8a 0%, #1e1b4b 100%);
    --ns-gradient-right:   linear-gradient(135deg, #4c1d95 0%, #2e1065 100%);
    --ns-gradient-hero:    radial-gradient(ellipse 80% 60% at 50% -10%,
                               rgba(59,130,246,0.12) 0%, transparent 70%);
    --ns-gradient-card:    linear-gradient(135deg,
                               rgba(59,130,246,0.06) 0%, rgba(139,92,246,0.06) 100%);

    /* ── Typography ──────────────────────────────────────── */
    --ns-font-primary:  'Inter', system-ui, -apple-system, sans-serif;
    --ns-font-mono:     'JetBrains Mono', 'Fira Code', monospace;

    /* ── Border radii ────────────────────────────────────── */
    --ns-radius-xs:  4px;
    --ns-radius-sm:  8px;
    --ns-radius-md:  12px;
    --ns-radius-lg:  16px;
    --ns-radius-xl:  24px;
    --ns-radius-full: 9999px;

    /* ── Spacing scale ───────────────────────────────────── */
    --ns-space-1:  4px;
    --ns-space-2:  8px;
    --ns-space-3:  12px;
    --ns-space-4:  16px;
    --ns-space-6:  24px;
    --ns-space-8:  32px;
    --ns-space-10: 40px;
    --ns-space-12: 48px;
    --ns-space-16: 64px;

    /* Animation & Motion */
    --ns-duration-fast: 150ms;
    --ns-duration-normal: 250ms;
    --ns-duration-slow: 400ms;
    --ns-easing-default: cubic-bezier(0.4, 0, 0.2, 1);
    --ns-easing-in: cubic-bezier(0.4, 0, 1, 1);
    --ns-easing-out: cubic-bezier(0, 0, 0.2, 1);

    /* Semantic Aliases (shadcn-compatible) */
    --background: var(--ns-bg-primary);
    --foreground: var(--ns-text-primary);
    --card: var(--ns-bg-card);
    --card-foreground: var(--ns-text-primary);
    --primary: var(--ns-accent-blue);
    --primary-foreground: #ffffff;
    --muted: var(--ns-bg-secondary);
    --muted-foreground: var(--ns-text-muted);
    --border: var(--ns-border);
    --ring: var(--ns-accent-blue);

    /* ── Shadows ─────────────────────────────────────────── */
    --ns-shadow-sm:   0 2px 8px rgba(0, 0, 0, 0.40);
    --ns-shadow-md:   0 4px 20px rgba(0, 0, 0, 0.55);
    --ns-shadow-lg:   0 8px 40px rgba(0, 0, 0, 0.70);
    --ns-shadow-glow: 0 0 24px rgba(59, 130, 246, 0.35);
    --ns-shadow-glow-purple: 0 0 24px rgba(139, 92, 246, 0.35);
    --ns-shadow-glow-sm: 0 0 12px rgba(59, 130, 246, 0.20);

    /* ── Transitions ─────────────────────────────────────── */
    --ns-transition-fast:   0.15s ease;
    --ns-transition-base:   0.25s ease;
    --ns-transition-slow:   0.40s ease;

    /* ── Z-index layers ──────────────────────────────────── */
    --ns-z-base:    1;
    --ns-z-raised:  10;
    --ns-z-dropdown:100;
    --ns-z-modal:   200;
    --ns-z-overlay: 300;
    --ns-z-toast:   400;
}


/* ============================================================
 * BASE RESET & BODY
 * ============================================================ */
.ns-page {
    background: var(--ns-bg-primary);
    color: var(--ns-text-primary);
    font-family: var(--ns-font-primary);
    min-height: 100vh;
}


/* ============================================================
 * LAYOUT — SECTIONS
 * ============================================================ */
.ns-section {
    padding: 80px 24px;
    position: relative;
}

.ns-section-sm {
    padding: 48px 24px;
}

.ns-container {
    max-width: 1100px;
    margin: 0 auto;
    width: 100%;
}

.ns-container-lg {
    max-width: 1280px;
    margin: 0 auto;
    width: 100%;
}

/* Alternating section backgrounds */
.ns-section--surface {
    background: var(--ns-bg-secondary);
}

.ns-section--card {
    background: var(--ns-bg-card);
}


/* ============================================================
 * TYPOGRAPHY
 * ============================================================ */
.ns-heading {
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 900;
    line-height: 1.15;
    color: var(--ns-text-primary);
    letter-spacing: -0.02em;
}

.ns-heading-gradient {
    background: var(--ns-gradient-primary);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.ns-subheading {
    font-size: clamp(1.1rem, 2.5vw, 1.4rem);
    font-weight: 700;
    color: var(--ns-text-primary);
}

.ns-body {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--ns-text-secondary);
}

.ns-body-sm {
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--ns-text-muted);
}

.ns-label {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ns-text-muted);
}

.ns-code {
    font-family: var(--ns-font-mono);
    font-size: 0.85em;
    background: var(--ns-bg-card);
    border: 1px solid var(--ns-border);
    border-radius: var(--ns-radius-xs);
    padding: 2px 6px;
    color: var(--ns-accent-blue);
}


/* ============================================================
 * CARDS
 * ============================================================ */
.ns-card {
    background: var(--ns-bg-card);
    border: 1px solid var(--ns-border);
    border-radius: var(--ns-radius-lg);
    padding: var(--ns-space-6);
    transition: border-color var(--ns-transition-base),
                box-shadow var(--ns-transition-base),
                transform var(--ns-transition-base);
}

.ns-card:hover {
    border-color: var(--ns-border-blue);
    box-shadow: var(--ns-shadow-glow-sm);
    transform: translateY(-2px);
}

.ns-card--blue {
    border-color: var(--ns-border-blue);
}

.ns-card--purple {
    border-color: var(--ns-border-purple);
}

.ns-card--glow {
    box-shadow: var(--ns-shadow-glow);
}

.ns-card--gradient {
    background: var(--ns-gradient-card);
    border-color: var(--ns-border-blue);
}

.ns-card-header {
    margin-bottom: var(--ns-space-4);
    padding-bottom: var(--ns-space-4);
    border-bottom: 1px solid var(--ns-border);
}

.ns-card-title {
    font-size: 1rem;
    font-weight: 800;
    color: var(--ns-text-primary);
    margin: 0 0 4px;
}

.ns-card-desc {
    font-size: 0.83rem;
    color: var(--ns-text-muted);
    line-height: 1.5;
    margin: 0;
}


/* ============================================================
 * BUTTONS
 * ============================================================ */
.ns-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--ns-font-primary);
    font-weight: 700;
    font-size: 0.9rem;
    border-radius: var(--ns-radius-full);
    padding: 12px 28px;
    cursor: pointer;
    transition: all var(--ns-transition-fast);
    text-decoration: none;
    border: 2px solid transparent;
    white-space: nowrap;
}

/* Primary — blue→purple gradient */
.ns-btn-primary {
    background: var(--ns-gradient-primary);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 0 24px rgba(59, 130, 246, 0.35);
}

.ns-btn-primary:hover {
    box-shadow: 0 0 36px rgba(59, 130, 246, 0.55);
    transform: translateY(-1px);
    color: #fff;
    text-decoration: none;
}

/* Secondary — outline */
.ns-btn-secondary {
    background: transparent;
    color: var(--ns-text-primary);
    border-color: var(--ns-border-blue);
}

.ns-btn-secondary:hover {
    border-color: var(--ns-accent-blue);
    color: var(--ns-accent-blue);
    box-shadow: var(--ns-shadow-glow-sm);
    text-decoration: none;
}

/* Ghost — subtle */
.ns-btn-ghost {
    background: rgba(255, 255, 255, 0.05);
    color: var(--ns-text-secondary);
    border-color: var(--ns-border-subtle);
}

.ns-btn-ghost:hover {
    background: rgba(255, 255, 255, 0.10);
    color: var(--ns-text-primary);
    text-decoration: none;
}

/* Danger */
.ns-btn-danger {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
    border-color: rgba(239, 68, 68, 0.40);
}

.ns-btn-danger:hover {
    background: rgba(239, 68, 68, 0.25);
    box-shadow: 0 0 20px rgba(239, 68, 68, 0.25);
    text-decoration: none;
}

/* Size variants */
.ns-btn-sm {
    padding: 8px 18px;
    font-size: 0.8rem;
}

.ns-btn-lg {
    padding: 16px 40px;
    font-size: 1rem;
}

.ns-btn:disabled,
.ns-btn[disabled] {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}


/* ============================================================
 * BADGES / TAGS
 * ============================================================ */
.ns-badge {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: var(--ns-radius-full);
    border: 1px solid transparent;
}

.ns-badge-blue {
    background: rgba(59, 130, 246, 0.15);
    color: #93c5fd;
    border-color: rgba(59, 130, 246, 0.25);
}

.ns-badge-purple {
    background: rgba(139, 92, 246, 0.15);
    color: #c4b5fd;
    border-color: rgba(139, 92, 246, 0.25);
}

.ns-badge-green {
    background: rgba(16, 185, 129, 0.15);
    color: #6ee7b7;
    border-color: rgba(16, 185, 129, 0.25);
}

.ns-badge-gradient {
    background: var(--ns-gradient-primary);
    color: #fff;
}


/* ============================================================
 * FORM ELEMENTS
 * ============================================================ */
.ns-input,
.ns-select,
.ns-textarea {
    background: var(--ns-bg-card);
    border: 1px solid var(--ns-border);
    border-radius: var(--ns-radius-sm);
    color: var(--ns-text-primary);
    font-family: var(--ns-font-primary);
    font-size: 0.9rem;
    padding: 10px 14px;
    width: 100%;
    transition: border-color var(--ns-transition-fast),
                box-shadow var(--ns-transition-fast);
    outline: none;
}

.ns-input::placeholder,
.ns-textarea::placeholder {
    color: var(--ns-text-muted);
}

.ns-input:focus,
.ns-select:focus,
.ns-textarea:focus {
    border-color: var(--ns-accent-blue);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.ns-label-text {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--ns-text-muted);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.ns-form-group {
    margin-bottom: var(--ns-space-4);
}


/* ============================================================
 * DIVIDERS
 * ============================================================ */
.ns-divider {
    height: 1px;
    background: linear-gradient(90deg,
        transparent,
        var(--ns-border) 30%,
        var(--ns-border) 70%,
        transparent);
    border: none;
    margin: var(--ns-space-8) 0;
}


/* ============================================================
 * HERO SECTION HELPERS
 * ============================================================ */
.ns-hero {
    background: var(--ns-bg-primary);
    position: relative;
    overflow: hidden;
}

.ns-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--ns-gradient-hero);
    pointer-events: none;
}

.ns-hero-title {
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: -0.03em;
    color: var(--ns-text-primary);
}


/* ============================================================
 * STATUS / LIVE INDICATORS
 * ============================================================ */
.ns-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: var(--ns-radius-full);
}

.ns-dot-blue   { background: var(--ns-accent-blue); }
.ns-dot-purple { background: var(--ns-accent-purple); }
.ns-dot-green  { background: var(--ns-accent-green); box-shadow: 0 0 6px rgba(16,185,129,0.6); }

@keyframes ns-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.4; }
}

.ns-dot-pulse {
    animation: ns-pulse 2s ease-in-out infinite;
}


/* ============================================================
 * UTILITY CLASSES
 * ============================================================ */

/* Text colors */
.ns-text-blue   { color: var(--ns-accent-blue); }
.ns-text-purple { color: var(--ns-accent-purple); }
.ns-text-green  { color: var(--ns-accent-green); }
.ns-text-muted  { color: var(--ns-text-muted); }
.ns-text-dim    { color: var(--ns-text-muted); }

/* Gradient text */
.ns-text-gradient {
    background: var(--ns-gradient-primary);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Background fill utilities */
.ns-bg-primary   { background: var(--ns-bg-primary); }
.ns-bg-secondary { background: var(--ns-bg-secondary); }
.ns-bg-card      { background: var(--ns-bg-card); }

/* Border utilities */
.ns-border       { border: 1px solid var(--ns-border); }
.ns-border-blue  { border: 1px solid var(--ns-border-blue); }
.ns-border-purple{ border: 1px solid var(--ns-border-purple); }

/* Glow utilities */
.ns-glow-blue    { box-shadow: var(--ns-shadow-glow); }
.ns-glow-purple  { box-shadow: var(--ns-shadow-glow-purple); }

/* Blur glass effect */
.ns-glass {
    background: rgba(15, 15, 26, 0.80);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--ns-border);
}

/* Reveal animation (same as landing page) */
@keyframes ns-reveal-up {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}

.ns-reveal {
    animation: ns-reveal-up 0.55s ease both;
}

/* Grid helpers */
.ns-grid {
    display: grid;
    gap: var(--ns-space-6);
}

.ns-grid-2 { grid-template-columns: repeat(2, 1fr); }
.ns-grid-3 { grid-template-columns: repeat(3, 1fr); }
.ns-grid-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 768px) {
    .ns-grid-2,
    .ns-grid-3,
    .ns-grid-4 { grid-template-columns: 1fr; }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .ns-grid-3,
    .ns-grid-4 { grid-template-columns: repeat(2, 1fr); }
}