/**
 * 999DEX DESIGN SYSTEM - CSS VARIABLES
 *
 * Complete design token system for the 999DEX platform
 * Based on pump.fun dark-first aesthetic with professional polish
 *
 * Version: 1.0.0
 * Last Updated: November 2, 2025
 * References: Agent 1 (UI/UX), Agent 2 (Animations), Agent 3 (Token Cards)
 */

:root {
  /* ========================================
     COLOR SYSTEM
     ======================================== */

  /* Primary Backgrounds */
  --bg-primary: #0a0a0a;           /* Main background (near-black) */
  --bg-secondary: #1a1a1a;         /* Secondary surfaces */
  --bg-tertiary: #2a2a2a;          /* Tertiary surfaces */
  --bg-elevated: #1f1f1f;          /* Elevated surfaces (cards, modals) */

  /* Text Colors */
  --text-primary: #ffffff;         /* Primary text (white) */
  --text-secondary: rgba(255, 255, 255, 0.7);   /* Secondary text */
  --text-tertiary: rgba(255, 255, 255, 0.5);    /* Tertiary text */
  --text-muted: rgba(255, 255, 255, 0.3);       /* Muted text */

  /* Accent Colors (pump.fun inspired) */
  --accent-green: #22c55e;         /* Bullish/success (bright green) */
  --accent-red: #ef4444;           /* Bearish/error (bright red) */
  --accent-blue: #3b82f6;          /* Info (blue) */
  --accent-yellow: #fbbf24;        /* Warning (yellow) */
  --accent-purple: #a855f7;        /* Brand/special (purple) */
  --accent-cyan: #06b6d4;          /* Secondary accent */

  /* Semantic Colors */
  --success: #10b981;              /* Success state */
  --success-light: rgba(16, 185, 129, 0.2);
  --error: #ef4444;                /* Error state */
  --error-light: rgba(239, 68, 68, 0.2);
  --warning: #f59e0b;              /* Warning state */
  --warning-light: rgba(245, 158, 11, 0.2);
  --info: #06b6d4;                 /* Info state */
  --info-light: rgba(6, 182, 212, 0.2);

  /* Border Colors */
  --border-primary: rgba(255, 255, 255, 0.1);
  --border-secondary: rgba(255, 255, 255, 0.05);
  --border-hover: rgba(255, 255, 255, 0.3);
  --border-focus: rgba(255, 255, 255, 0.5);

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

  --spacing-xs: 4px;               /* 0.25rem */
  --spacing-sm: 8px;               /* 0.5rem */
  --spacing-base: 12px;            /* 0.75rem - Base spacing (most common) */
  --spacing-md: 16px;              /* 1rem */
  --spacing-lg: 24px;              /* 1.5rem */
  --spacing-xl: 32px;              /* 2rem */
  --spacing-2xl: 48px;             /* 3rem */
  --spacing-3xl: 64px;             /* 4rem */

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

  /* Font Families */
  --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
                 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji',
                 'Segoe UI Emoji', 'Segoe UI Symbol';
  --font-family-mono: 'Courier New', Courier, monospace;

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

  /* Font Weights */
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  /* Line Heights */
  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;
  --line-height-loose: 2;

  /* Letter Spacing */
  --letter-spacing-tight: -0.02em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.05em;

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

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.4);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.5);
  --shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.6);

  /* Glow Shadows (for hover states) */
  --shadow-glow: 0 8px 24px rgba(255, 255, 255, 0.15);
  --shadow-glow-green: 0 8px 24px rgba(34, 197, 94, 0.3);
  --shadow-glow-red: 0 8px 24px rgba(239, 68, 68, 0.3);
  --shadow-glow-purple: 0 8px 24px rgba(168, 85, 247, 0.3);

  /* ========================================
     BORDER RADIUS
     ======================================== */

  --radius-sm: 4px;                /* Small elements */
  --radius-md: 8px;                /* Medium elements */
  --radius-lg: 12px;               /* Cards, modals */
  --radius-xl: 16px;               /* Large containers */
  --radius-full: 9999px;           /* Pills, avatars */

  /* ========================================
     TRANSITIONS & ANIMATIONS
     ======================================== */

  /* Timing Functions */
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);

  /* Durations */
  --transition-fast: 150ms;        /* Quick feedback */
  --transition-normal: 200ms;      /* Standard interactions */
  --transition-medium: 300ms;      /* Modals, slides */
  --transition-slow: 400ms;        /* Complex animations */

  /* Complete Transition Strings */
  --transition-all-fast: all 150ms var(--ease-in-out);
  --transition-all-normal: all 200ms var(--ease-in-out);
  --transition-transform: transform 200ms var(--ease-in-out);
  --transition-opacity: opacity 200ms var(--ease-in-out);
  --transition-colors: color 200ms var(--ease-in-out),
                       background-color 200ms var(--ease-in-out),
                       border-color 200ms var(--ease-in-out);

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

  --z-base: 0;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-modal-backdrop: 400;
  --z-modal: 500;
  --z-popover: 600;
  --z-tooltip: 700;
  --z-toast: 800;
  --z-progress-bar: 1600;          /* NProgress bar (must be top) */

  /* ========================================
     BREAKPOINTS (for JavaScript usage)
     ======================================== */

  --breakpoint-mobile: 375px;
  --breakpoint-tablet: 768px;
  --breakpoint-desktop: 1024px;
  --breakpoint-large: 1440px;
  --breakpoint-xlarge: 1920px;

  /* ========================================
     COMPONENT-SPECIFIC TOKENS
     ======================================== */

  /* Cards */
  --card-bg: rgba(255, 255, 255, 0.03);
  --card-border: 1px solid rgba(255, 255, 255, 0.1);
  --card-radius: var(--radius-lg);
  --card-padding: var(--spacing-md);
  --card-shadow: var(--shadow-sm);
  --card-shadow-hover: var(--shadow-glow);

  /* Buttons - WCAG AAA Touch Target Compliance (44px minimum) */
  --button-height-sm: 40px;          /* Small buttons (40px) */
  --button-height-md: 44px;          /* Standard buttons (44px minimum) */
  --button-height-lg: 48px;          /* Large buttons (48px) */
  --button-padding-x: var(--spacing-md);
  --button-padding-x-sm: 12px;       /* Small button horizontal padding */
  --button-padding-x-lg: var(--spacing-lg); /* Large button horizontal padding */
  --button-radius: var(--radius-md);

  /* Inputs */
  --input-height: 44px;            /* Touch-friendly */
  --input-padding-x: var(--spacing-md);
  --input-radius: var(--radius-md);
  --input-border: 1px solid var(--border-primary);
  --input-bg: rgba(255, 255, 255, 0.05);

  /* Modals */
  --modal-backdrop: rgba(0, 0, 0, 0.75);
  --modal-bg: var(--bg-secondary);
  --modal-radius: var(--radius-xl);
  --modal-padding: var(--spacing-xl);

  /* Token Card Specifics (from Agent 3) */
  --token-card-image-size: 120px;
  --token-card-gap: var(--spacing-md);
  --token-grid-gap-mobile: var(--spacing-md);
  --token-grid-gap-tablet: var(--spacing-lg);
  --token-grid-gap-desktop: var(--spacing-xl);
}

/* ========================================
   ACCESSIBILITY: REDUCED MOTION
   ======================================== */

@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast: 0ms;
    --transition-normal: 0ms;
    --transition-medium: 0ms;
    --transition-slow: 0ms;
    --transition-all-fast: none;
    --transition-all-normal: none;
    --transition-transform: none;
    --transition-opacity: none;
    --transition-colors: none;
  }

  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ========================================
   DARK MODE SUPPORT (future-proofing)
   ======================================== */

@media (prefers-color-scheme: light) {
  /* Currently 999DEX is dark-only, but tokens ready for light mode */
  /* Uncomment and adjust when light mode is needed */
  /*
  :root {
    --bg-primary: #ffffff;
    --bg-secondary: #f5f5f5;
    --text-primary: #0a0a0a;
    ... etc
  }
  */
}