/*
 * Vibeforge Design Tokens
 * Single source of truth for all visual design values
 * 
 * Usage: var(--vf-[token-name])
 * Example: var(--vf-accent)
 */

/* ============================================
   COLOR PALETTE
   ============================================ */
:root {
  /* Primary brand color */
  --vf-accent: #4c6fff;
  --vf-accent-hover: #3b5ae8;
  --vf-accent-active: #2d4ccc;
  
  /* Supporting accent colors */
  --vf-accent-secondary: #8f9eff;
  --vf-accent-tertiary: #c7ccff;
  
  /* Backgrounds */
  --vf-surface: #ffffff;
  --vf-surface-elevated: #fafafa;
  --vf-surface-alt: #f0f2f5;
  --vf-surface-overlay: rgba(0, 0, 0, 0.4);
  
  /* Text colors */
  --vf-text-primary: #050505;
  --vf-text-secondary: #65676b;
  --vf-text-tertiary: #8a8d8f;
  --vf-text-inverse: #ffffff;
  
  /* Borders */
  --vf-border: rgba(5, 5, 5, 0.08);
  --vf-border-strong: rgba(5, 5, 5, 0.15);
  --vf-border-focus: var(--vf-accent);
  
  /* Status colors */
  --vf-success: #31a24c;
  --vf-warning: #f7b928;
  --vf-danger: #f02849;
  --vf-info: #1877f2;
  
  /* Shadows */
  --vf-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.1);
  --vf-shadow-md: 0 4px 8px rgba(0, 0, 0, 0.1);
  --vf-shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.15);
  --vf-shadow-xl: 0 16px 32px rgba(0, 0, 0, 0.2);
  
  /* ============================================
     SPACING (8pt grid system)
     ============================================ */
  --vf-space-0: 0;
  --vf-space-xs: 4px;
  --vf-space-sm: 8px;
  --vf-space-md: 12px;
  --vf-space-lg: 16px;
  --vf-space-xl: 20px;
  --vf-space-2xl: 24px;
  --vf-space-3xl: 32px;
  --vf-space-4xl: 40px;
  --vf-space-5xl: 48px;
  
  /* ============================================
     BORDER RADIUS
     ============================================ */
  --vf-radius-sm: 8px;
  --vf-radius-md: 12px;
  --vf-radius-lg: 18px;
  --vf-radius-xl: 24px;
  --vf-radius-full: 9999px;
  
  /* ============================================
     FONT SIZES (system font stack)
     ============================================ */
  --vf-font-xs: 0.75rem;
  --vf-font-sm: 0.875rem;
  --vf-font-md: 1rem;
  --vf-font-lg: 1.125rem;
  --vf-font-xl: 1.25rem;
  --vf-font-2xl: 1.5rem;
  --vf-font-3xl: 1.875rem;
  --vf-font-4xl: 2.25rem;
  
  /* ============================================
     LINE HEIGHTS
     ============================================ */
  --vf-leading-tight: 1.25;
  --vf-leading-normal: 1.5;
  --vf-leading-relaxed: 1.75;
  
  /* ============================================
     Z-INDEX SCALE
     ============================================ */
  --vf-z-dropdown: 1000;
  --vf-z-sticky: 1020;
  --vf-z-fixed: 1030;
  --vf-z-modal-backdrop: 1040;
  --vf-z-modal: 1050;
  --vf-z-popover: 1060;
  --vf-z-tooltip: 1070;
  --vf-z-toast: 1080;
  
  /* ============================================
     TRANSITIONS
     ============================================ */
  --vf-transition-fast: 150ms;
  --vf-transition-normal: 200ms;
  --vf-transition-slow: 300ms;
  
  /* ============================================
     LAYOUT
     ============================================ */
  --vf-max-width: 1200px;
  --vf-sidebar-width: 300px;
  --vf-header-height: 60px;
  --vf-footer-height: 56px;
  --vf-footer-height-lg: 65px;
}

/* ============================================
   NIGHT MODE TOKENS
   ============================================ */
body.night-mode {
  --vf-surface: #18191a;
  --vf-surface-elevated: #242526;
  --vf-surface-alt: #3a3b3c;
  --vf-surface-overlay: rgba(0, 0, 0, 0.6);
  
  --vf-text-primary: #e4e6eb;
  --vf-text-secondary: #b0b3b8;
  --vf-text-tertiary: #8a8d8f;
  
  --vf-border: rgba(255, 255, 255, 0.08);
  --vf-border-strong: rgba(255, 255, 255, 0.15);
}

/* ============================================
   PWA / STANDALONE MODE
   ============================================ */
html.app-standalone {
  --vf-header-height: 44px;
}

/* ============================================
   COMPONENT TOKENS DEPRECATED
   Use --vf-* tokens above instead
   ============================================ */
/* These are mapped for backwards compatibility */
:root {
  --vf-ui-accent: var(--vf-accent);
  --vf-ui-accent-strong: var(--vf-accent-hover);
  --vf-ui-surface: var(--vf-surface);
  --vf-ui-surface-alt: var(--vf-surface-alt);
  --vf-ui-border: var(--vf-border);
  --vf-ui-border-strong: var(--vf-border-strong);
  --vf-ui-shadow-sm: var(--vf-shadow-sm);
  --vf-ui-shadow-md: var(--vf-shadow-md);
  --vf-ui-radius: var(--vf-radius-lg);
}