/**
 * Killa-App Design System Variables
 * Solo Leveling-inspired system UI
 * Dark-only, high-contrast, neon glow accents
 */

:root {
  /* ==================== COLORS ==================== */

  /* Solo Leveling Core Palette */
  --sl-primary: #9D4EDD;        /* Purple glow - primary actions */
  --sl-primary-bright: #C77DFF; /* Bright purple - hover states */
  --sl-primary-dark: #5A189A;   /* Dark purple - active states */
  --sl-accent: #22D3EE;         /* Cyan accent - secondary callouts */
  --sl-purple-glow: #9D4EDD;    /* Glow effect color */

  --sl-primary-rgb: 157, 78, 221;
  --sl-primary-bright-rgb: 199, 125, 255;
  --sl-primary-dark-rgb: 90, 24, 154;
  --sl-accent-rgb: 34, 211, 238;

  /* Surfaces - Void Black + Violet Tint */
  --sl-bg-0: #0A0B12;           /* Base background */
  --sl-bg-1: #0F111B;           /* Primary surface */
  --sl-bg-2: #14172A;           /* Secondary surface */
  --sl-bg-3: #1B1F36;           /* Card surface */
  --sl-bg-4: #222742;           /* Elevated surface */

  --sl-bg-0-rgb: 10, 11, 18;
  --sl-bg-1-rgb: 15, 17, 27;
  --sl-bg-2-rgb: 20, 23, 42;
  --sl-bg-3-rgb: 27, 31, 54;
  --sl-bg-4-rgb: 34, 39, 66;

  /* Borders */
  --sl-border-subtle: #2A2F4A;
  --sl-border: #3B4161;
  --sl-border-strong: #4B5275;
  --sl-border-glow: #9D4EDD;    /* Purple border for active states */

  --sl-border-rgb: 59, 65, 97;

  /* Text - High Contrast */
  --sl-text-primary: #F8F7FF;   /* Main text */
  --sl-text-secondary: #C8C9E5; /* Labels */
  --sl-text-tertiary: #9AA0C2;  /* Muted text */
  --sl-text-muted: #6C7396;     /* Disabled */
  --sl-text-glow: #E2C7FF;      /* Purple glow text */

  /* Semantic Colors */
  --sl-success: #10B981;
  --sl-success-bg: #0E2419;
  --sl-warning: #F59E0B;
  --sl-warning-bg: #2A2010;
  --sl-error: #EF4444;
  --sl-error-bg: #2A1518;
  --sl-info: #38BDF8;
  --sl-info-bg: #0E1A2B;

  --sl-success-rgb: 16, 185, 129;
  --sl-warning-rgb: 245, 158, 11;
  --sl-error-rgb: 239, 68, 68;
  --sl-info-rgb: 56, 189, 248;

  /* Accent Colors */
  --sl-cyan: #22D3EE;
  --sl-pink: #F472B6;
  --sl-gold: #FBBF24;

  --sl-cyan-rgb: 34, 211, 238;
  --sl-pink-rgb: 244, 114, 182;
  --sl-gold-rgb: 251, 191, 36;

  /* Legacy aliases for backwards compatibility */
  --brand-red: var(--sl-primary);
  --brand-red-alt: var(--sl-primary-bright);
  --panel-bg: var(--sl-bg-0);
  --panel-surface: var(--sl-bg-2);
  --panel-border: var(--sl-border);
  --term-bg-0: var(--sl-bg-0);
  --term-text-primary: var(--sl-text-primary);
  --term-border: var(--sl-border);

  /* ==================== TYPOGRAPHY ==================== */

  /* Font Stacks */
  --font-sans: "Oxanium", "Sora", "Noto Sans", "Helvetica Neue", sans-serif;
  --font-mono: "JetBrains Mono", "IBM Plex Mono", "SFMono-Regular",
               "Source Code Pro", Menlo, Consolas, "Liberation Mono", monospace;

  /* Type Scale - 1.25 Ratio (Modular Scale) */
  --text-xs: 0.75rem;      /* 12px - Captions, metadata */
  --text-sm: 0.875rem;     /* 14px - Body small, labels */
  --text-base: 1rem;       /* 16px - Primary body */
  --text-lg: 1.125rem;     /* 18px - Emphasized text */
  --text-xl: 1.25rem;      /* 20px - Subheadings */
  --text-2xl: 1.563rem;    /* 25px - Section headers */
  --text-3xl: 1.953rem;    /* 31px - Page titles */
  --text-4xl: 2.441rem;    /* 39px - Hero text (auth page) */

  /* Line Heights - Tighter for Technical UI */
  --leading-tight: 1.25;     /* Headings */
  --leading-snug: 1.375;     /* UI elements */
  --leading-normal: 1.5;     /* Body text */
  --leading-relaxed: 1.625;  /* Long-form content */

  /* Font Weights */
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* Letter Spacing */
  --tracking-tight: -0.025em;
  --tracking-normal: 0em;
  --tracking-wide: 0.05em;
  --tracking-wider: 0.1em;

  /* ==================== SPACING ==================== */

  /* 8px Grid System - Base Unit: 8px (0.5rem) */
  --space-0: 0;
  --space-1: 0.25rem;   /* 4px  - Tight inline spacing */
  --space-2: 0.5rem;    /* 8px  - Element padding */
  --space-3: 0.75rem;   /* 12px - Compact spacing */
  --space-4: 1rem;      /* 16px - Standard gap */
  --space-5: 1.25rem;   /* 20px - Comfortable spacing */
  --space-6: 1.5rem;    /* 24px - Section spacing */
  --space-8: 2rem;      /* 32px - Large gaps */
  --space-10: 2.5rem;   /* 40px - Major sections */
  --space-12: 3rem;     /* 48px - Page padding */
  --space-16: 4rem;     /* 64px - Hero spacing */

  /* ==================== LAYOUT ==================== */

  /* Container Widths */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;
  --container-2xl: 1440px;

  /* Sidebar */
  --sidebar-width: 280px;
  --sidebar-collapsed: 64px;

  /* ==================== BORDERS ==================== */

  /* Border Radius - Sharper for Terminal Aesthetic */
  --radius-sm: 4px;      /* Small elements */
  --radius-md: 6px;      /* Forms, buttons */
  --radius-lg: 8px;      /* Cards, containers */
  --radius-xl: 12px;     /* Modals, large sections */
  --radius-full: 9999px; /* Badges, avatars */

  /* ==================== SHADOWS ==================== */

  /* Shadow System */
  --shadow-sm: 0 1px 3px rgba(6, 8, 16, 0.4);
  --shadow-md: 0 6px 16px rgba(6, 8, 16, 0.45);
  --shadow-lg: 0 12px 30px rgba(6, 8, 16, 0.55);

  /* Violet Glow for Emphasis */
  --shadow-rust: 0 0 24px rgba(157, 78, 221, 0.3);
  --shadow-rust-sm: 0 0 14px rgba(157, 78, 221, 0.2);

  /* ==================== TRANSITIONS ==================== */

  /* Fast Transitions Only - Performance First */
  --transition-fast: 120ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-smooth: 300ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Easing Curves */
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  /* ==================== Z-INDEX ==================== */

  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
}

/* ==================== DARK MODE (ONLY MODE) ==================== */

html {
  background-color: var(--sl-bg-0);
  color: var(--sl-text-primary);
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Monospace Elements */
code,
kbd,
samp,
pre {
  font-family: var(--font-mono);
}