/* Roscripters.com - Design System Tokens
 * Single source of truth for all design values
 * ============================================ */

:root {
   /* ============================
       SPACING SCALE (4px base unit)
       ============================ */
   --space-1: 4px;
   --space-2: 8px;
   --space-3: 12px;
   --space-4: 16px;
   --space-5: 24px;
   --space-6: 32px;
   --space-7: 48px;
   --space-8: 64px;

   /* Legacy spacing aliases (for compatibility) */
   --spacing-xs: var(--space-1);
   /* 4px */
   --spacing-sm: var(--space-2);
   /* 8px */
   --spacing-md: var(--space-4);
   /* 16px */
   --spacing-lg: var(--space-5);
   /* 24px */
   --spacing-xl: var(--space-6);
   /* 32px */
   --spacing-2xl: var(--space-7);
   /* 48px */
   --spacing-3xl: var(--space-8);
   /* 64px */

   /* ============================
       COLORS - Dark Theme
       ============================ */
   --bg-primary: #000000;
   --bg-secondary: #0d0d10;
   --bg-card: #25282E;
   --bg-card-hover: #2E323A;
   --bg-input: #18181b;

   /* Accent - Purple */
   --accent: #8b5cf6;
   --accent-hover: #7c3aed;
   --accent-light: rgba(139, 92, 246, 0.1);
   --accent-glow: rgba(139, 92, 246, 0.3);

   /* Text with opacity scale */
   --text-primary: rgba(255, 255, 255, 0.92);
   --text-secondary: rgba(255, 255, 255, 0.70);
   --text-muted: rgba(255, 255, 255, 0.50);
   --text-faint: rgba(255, 255, 255, 0.35);

   /* ============================
       BORDERS (Consistent)
       ============================ */
   --border-subtle: rgba(255, 255, 255, 0.04);
   /* Dividers */
   --border: rgba(255, 255, 255, 0.06);
   /* Default */
   --border-light: rgba(255, 255, 255, 0.10);
   /* Stronger */
   --border-hover: rgba(134, 81, 243, 0.45);
   /* Purple accent on hover */
   --border-divider: rgba(255, 255, 255, 0.04);
   /* Section dividers */

   /* ============================
       STATUS COLORS
       ============================ */
   --success: #22c55e;
   --success-subtle: rgba(34, 197, 94, 0.35);
   /* Subtle green for toasts */
   --success-bg: rgba(34, 197, 94, 0.1);

   --error: #ef4444;
   --error-subtle: rgba(239, 68, 68, 0.35);
   --error-bg: rgba(239, 68, 68, 0.1);

   /* Verified Badge */
   --verified-blue: #1d9bf0;

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

   --info: #00B8FF;
   --info-bg: rgba(0, 184, 255, 0.1);

   --neutral: rgba(255, 255, 255, 0.08);
   /* For neutral toasts */

   /* ============================
       SHADOWS (Consistent)
       ============================ */
   --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
   --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
   --shadow-card: 0 10px 50px rgba(0, 0, 0, 0.55);
   --shadow-card-hover: 0 14px 60px rgba(0, 0, 0, 0.65);
   --shadow-popover: 0 14px 70px rgba(0, 0, 0, 0.65);
   --shadow-lg: var(--shadow-card);

   /* ============================
       BORDER RADIUS (Standardized)
       ============================ */
   --radius-sm: 6px;
   --radius-input: 12px;
   /* Inputs, chips, buttons */
   --radius-md: 12px;
   /* Alias */
   --radius-lg: 14px;
   --radius-card: 16px;
   /* Cards */
   --radius-xl: 20px;
   --radius-pill: 9999px;
   /* Pills, badges */
   --radius-full: 9999px;
   /* Alias */

   /* ============================
       TYPOGRAPHY SCALE
       ============================ */
   /* Font sizes */
   --text-xs: 0.75rem;
   /* 12px - Meta, timestamps */
   --text-sm: 0.8125rem;
   /* 13px - Small text */
   --text-base: 0.9375rem;
   /* 15px - Body */
   --text-md: 1rem;
   /* 16px - Body large */
   --text-lg: 1.125rem;
   /* 18px */
   --text-xl: 1.25rem;
   /* 20px */
   --text-2xl: 1.375rem;
   /* 22px - H2 sections */
   --text-3xl: 1.625rem;
   /* 26px - H2 large */
   --text-4xl: 3rem;
   /* 48px - H1 */
   --text-5xl: 3.5rem;
   /* 56px - H1 large */

   /* Font weights */
   --font-normal: 400;
   --font-medium: 500;
   --font-semibold: 600;
   --font-bold: 700;

   /* Line heights */
   --leading-tight: 1.2;
   --leading-normal: 1.5;
   --leading-relaxed: 1.625;

   /* ============================
       TRANSITIONS
       ============================ */
   --transition-fast: 150ms ease;
   --transition-normal: 250ms ease;
   --transition-toast: 180ms ease-out;

   /* ============================
       LAYOUT
       ============================ */
   --header-height: 64px;
   --max-width: 1280px;
   --toast-width: 340px;
   --toast-max-width: 360px;

   /* ============================
       Z-INDEX SCALE
       ============================ */
   --z-dropdown: 100;
   --z-sticky: 200;
   --z-header: 300;
   --z-modal: 400;
   --z-toast: 500;

   /* ============================
       COMPONENT HEIGHTS (Consistent)
       ============================ */
   --height-input: 44px;
   /* All inputs */
   --height-button: 40px;
   /* Standard buttons */
   --height-button-sm: 32px;
   --height-button-lg: 48px;
   --height-chip: 32px;
   /* Filter chips */
}