/* ============================================================
   ShadowBan — Design System Variables
   ============================================================ */

:root {
    /* ── Brand Colors ── */
    --color-primary:       #6366f1;  /* Indigo */
    --color-primary-light: #818cf8;
    --color-primary-dark:  #4f46e5;
    --color-primary-50:    #eef2ff;
    --color-primary-100:   #e0e7ff;
    --color-primary-900:   #312e81;

    --color-accent:        #06b6d4;  /* Cyan */
    --color-accent-light:  #22d3ee;
    --color-accent-dark:   #0891b2;

    /* ── Semantic Colors ── */
    --color-success:       #10b981;
    --color-success-light: #34d399;
    --color-success-bg:    rgba(16, 185, 129, 0.1);

    --color-warning:       #f59e0b;
    --color-warning-light: #fbbf24;
    --color-warning-bg:    rgba(245, 158, 11, 0.1);

    --color-danger:        #ef4444;
    --color-danger-light:  #f87171;
    --color-danger-bg:     rgba(239, 68, 68, 0.1);

    --color-info:          #3b82f6;
    --color-info-light:    #60a5fa;
    --color-info-bg:       rgba(59, 130, 246, 0.1);

    /* ── Neutral Colors (Dark Theme) ── */
    --color-bg-body:       #0f0f1a;
    --color-bg-primary:    #13131f;
    --color-bg-secondary:  #1a1a2e;
    --color-bg-tertiary:   #1f1f35;
    --color-bg-elevated:   #252540;
    --color-bg-hover:      #2a2a4a;

    --color-border:        rgba(255, 255, 255, 0.06);
    --color-border-light:  rgba(255, 255, 255, 0.10);
    --color-border-hover:  rgba(255, 255, 255, 0.15);

    --color-text-primary:  #f1f5f9;
    --color-text-secondary:#94a3b8;
    --color-text-muted:    #64748b;
    --color-text-inverse:  #0f172a;

    /* ── Glassmorphism ── */
    --glass-bg:            rgba(255, 255, 255, 0.04);
    --glass-bg-hover:      rgba(255, 255, 255, 0.07);
    --glass-border:        rgba(255, 255, 255, 0.08);
    --glass-blur:          20px;

    /* ── Gradients ── */
    --gradient-primary:    linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #06b6d4 100%);
    --gradient-accent:     linear-gradient(135deg, #06b6d4 0%, #3b82f6 100%);
    --gradient-danger:     linear-gradient(135deg, #ef4444 0%, #f97316 100%);
    --gradient-success:    linear-gradient(135deg, #10b981 0%, #06b6d4 100%);
    --gradient-dark:       linear-gradient(180deg, #0f0f1a 0%, #1a1a2e 100%);
    --gradient-card:       linear-gradient(145deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.02) 100%);
    --gradient-glow:       radial-gradient(circle at 50% 0%, rgba(99, 102, 241, 0.15), transparent 50%);

    /* ── Typography ── */
    --font-family:         'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono:           'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

    --font-size-xs:        0.75rem;    /* 12px */
    --font-size-sm:        0.875rem;   /* 14px */
    --font-size-base:      1rem;       /* 16px */
    --font-size-lg:        1.125rem;   /* 18px */
    --font-size-xl:        1.25rem;    /* 20px */
    --font-size-2xl:       1.5rem;     /* 24px */
    --font-size-3xl:       1.875rem;   /* 30px */
    --font-size-4xl:       2.25rem;    /* 36px */
    --font-size-5xl:       3rem;       /* 48px */

    --font-weight-normal:  400;
    --font-weight-medium:  500;
    --font-weight-semibold:600;
    --font-weight-bold:    700;
    --font-weight-extrabold:800;

    --line-height-tight:   1.25;
    --line-height-normal:  1.5;
    --line-height-relaxed: 1.75;

    /* ── Spacing ── */
    --space-1:  0.25rem;   /* 4px */
    --space-2:  0.5rem;    /* 8px */
    --space-3:  0.75rem;   /* 12px */
    --space-4:  1rem;      /* 16px */
    --space-5:  1.25rem;   /* 20px */
    --space-6:  1.5rem;    /* 24px */
    --space-8:  2rem;      /* 32px */
    --space-10: 2.5rem;    /* 40px */
    --space-12: 3rem;      /* 48px */
    --space-16: 4rem;      /* 64px */
    --space-20: 5rem;      /* 80px */
    --space-24: 6rem;      /* 96px */

    /* ── Layout ── */
    --sidebar-width:       260px;
    --sidebar-collapsed:   72px;
    --header-height:       64px;
    --content-max-width:   1200px;

    /* ── Borders ── */
    --radius-sm:   6px;
    --radius-md:   10px;
    --radius-lg:   14px;
    --radius-xl:   20px;
    --radius-2xl:  28px;
    --radius-full: 9999px;

    --border-width: 1px;

    /* ── Shadows ── */
    --shadow-sm:   0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md:   0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.2);
    --shadow-lg:   0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -4px rgba(0, 0, 0, 0.2);
    --shadow-xl:   0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 8px 10px -6px rgba(0, 0, 0, 0.2);
    --shadow-glow: 0 0 30px rgba(99, 102, 241, 0.15);
    --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.2);

    /* ── Transitions ── */
    --transition-fast:     150ms ease;
    --transition-base:     250ms ease;
    --transition-slow:     400ms ease;
    --transition-spring:   300ms cubic-bezier(0.34, 1.56, 0.64, 1);

    /* ── Z-Index ── */
    --z-dropdown:  100;
    --z-sticky:    200;
    --z-fixed:     300;
    --z-sidebar:   400;
    --z-modal-bg:  500;
    --z-modal:     600;
    --z-popover:   700;
    --z-tooltip:   800;
    --z-toast:     900;
}