/* ============================================
   ExchangerWhiteLabel — CSS Variables (White Label System)
   Change these values to rebrand the entire site.
   ============================================ */

:root {
  /* -- Primary Brand Colors -- */
  --color-primary: #6C5CE7;
  --color-primary-hover: #5A4BD1;
  --color-primary-light: rgba(108, 92, 231, 0.15);
  --color-primary-rgb: 108, 92, 231;

  /* -- Secondary / Accent -- */
  --color-secondary: #00D2D3;
  --color-secondary-hover: #00B8B9;
  --color-accent: #FD79A8;

  /* -- Backgrounds -- */
  --color-bg: #0B0E11;
  --color-bg-secondary: #111520;
  --color-bg-tertiary: #161B28;

  /* -- Surfaces (cards, modals, dropdowns) -- */
  --color-surface: #1A1F2E;
  --color-surface-hover: #222838;
  --color-surface-active: #2A3142;
  --color-surface-elevated: #1E2435;

  /* -- Borders -- */
  --color-border: #2A3142;
  --color-border-light: #353D50;
  --color-border-focus: var(--color-primary);

  /* -- Text -- */
  --color-text: #F0F0F0;
  --color-text-secondary: #A0A8BE;
  --color-text-muted: #6B7280;
  --color-text-inverse: #0B0E11;

  /* -- Status Colors -- */
  --color-success: #00B894;
  --color-success-light: rgba(0, 184, 148, 0.15);
  --color-warning: #FDCB6E;
  --color-warning-light: rgba(253, 203, 110, 0.15);
  --color-error: #FF6B6B;
  --color-error-light: rgba(255, 107, 107, 0.15);
  --color-info: #74B9FF;
  --color-info-light: rgba(116, 185, 255, 0.15);

  /* -- Typography -- */
  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-secondary: 'Space Grotesk', var(--font-primary);
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  /* Font Sizes -- fluid with clamp() */
  --font-size-xs: clamp(0.7rem, 0.65rem + 0.25vw, 0.75rem);
  --font-size-sm: clamp(0.8rem, 0.75rem + 0.25vw, 0.875rem);
  --font-size-base: clamp(0.875rem, 0.825rem + 0.25vw, 1rem);
  --font-size-md: clamp(1rem, 0.925rem + 0.375vw, 1.125rem);
  --font-size-lg: clamp(1.125rem, 1rem + 0.5vw, 1.25rem);
  --font-size-xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);
  --font-size-2xl: clamp(1.5rem, 1.25rem + 1.25vw, 2rem);
  --font-size-3xl: clamp(2rem, 1.5rem + 2.5vw, 3rem);
  --font-size-4xl: clamp(2.5rem, 1.75rem + 3.75vw, 4rem);

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

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

  /* -- Spacing -- */
  --spacing-2xs: 0.25rem;
  --spacing-xs: 0.5rem;
  --spacing-sm: 0.75rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-2xl: 3rem;
  --spacing-3xl: 4rem;
  --spacing-4xl: 6rem;

  /* -- Border Radius -- */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-full: 9999px;

  /* -- Shadows -- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.6);
  --shadow-glow: 0 0 20px rgba(var(--color-primary-rgb), 0.3);
  --shadow-glow-lg: 0 0 40px rgba(var(--color-primary-rgb), 0.2);

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

  /* -- Layout -- */
  --container-max-width: 1200px;
  --container-wide: 1400px;
  --container-narrow: 800px;
  --header-height: 72px;
  --sidebar-width: 300px;

  /* -- Z-Index Scale -- */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-header: 300;
  --z-overlay: 400;
  --z-modal: 500;
  --z-toast: 600;

  /* -- Form Elements -- */
  --input-height: 48px;
  --input-height-lg: 56px;
  --input-bg: var(--color-surface);
  --input-border: var(--color-border);
  --input-border-focus: var(--color-primary);
  --input-radius: var(--radius-md);
  --input-padding: 0 var(--spacing-md);

  /* -- Button -- */
  --btn-height: 48px;
  --btn-height-sm: 36px;
  --btn-height-lg: 56px;
  --btn-radius: var(--radius-md);
  --btn-font-weight: var(--font-weight-semibold);
}