/* ==========================================
   VARIABLES.CSS - Design System Tokens
   Central repository for spacing, typography, and UI scales
   Created: 2025-11-06
   ========================================== */

/* ==========================================
   USAGE GUIDE:
   
   Instead of:     gap: 1.5rem;
   Use:            gap: var(--space-lg);
   
   Instead of:     border-radius: 8px;
   Use:            border-radius: var(--radius-lg);
   
   Instead of:     font-size: 0.875rem;
   Use:            font-size: var(--text-sm);
   
   ========================================== */

:root {
  /* ==========================================
     SPACING SCALE
     Use for: gap, padding, margin
     ========================================== */
  --space-0: 0;
  --space-xs: 0.25rem;   /* 4px - tight spacing */
  --space-sm: 0.5rem;    /* 8px - compact spacing */
  --space-md: 1rem;      /* 16px - default spacing */
  --space-lg: 1.5rem;    /* 24px - comfortable spacing */
  --space-xl: 2rem;      /* 32px - loose spacing */
  --space-2xl: 3rem;     /* 48px - section spacing */
  --space-3xl: 4rem;     /* 64px - large section spacing */

  /* Common padding combinations (convenience aliases) */
  --padding-btn: 0.75rem 1rem;        /* Standard button padding */
  --padding-input: 0.75rem;            /* Standard input padding */
  --padding-card: 1.5rem;              /* Standard card padding */
  --padding-section: 2rem;             /* Standard section padding */


  /* ==========================================
     BORDER RADIUS SCALE
     Use for: border-radius
     ========================================== */
  --radius-none: 0;
  --radius-sm: 4px;      /* Small elements, inputs */
  --radius-md: 6px;      /* Medium buttons, cards */
  --radius-lg: 8px;      /* Large cards, containers */
  --radius-xl: 12px;     /* Extra large containers */
  --radius-2xl: 16px;    /* Modal dialogs */
  --radius-full: 9999px; /* Pills, avatars */


  /* ==========================================
     TYPOGRAPHY SCALE
     Use for: font-size
     ========================================== */
  --text-xs: 0.75rem;    /* 12px - Fine print, labels */
  --text-sm: 0.875rem;   /* 14px - Secondary text, captions */
  --text-base: 1rem;     /* 16px - Body text (default) */
  --text-lg: 1.125rem;   /* 18px - Emphasized text */
  --text-xl: 1.25rem;    /* 20px - Small headings */
  --text-2xl: 1.5rem;    /* 24px - Section headings */
  --text-3xl: 1.875rem;  /* 30px - Page headings */
  --text-4xl: 2.25rem;   /* 36px - Hero headings */

  /* Line heights for typography */
  --leading-none: 1;
  --leading-tight: 1.25;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  --leading-loose: 2;


  /* ==========================================
     FONT WEIGHTS
     Use for: font-weight
     ========================================== */
  --font-light: 300;
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --font-extrabold: 800;


  /* ==========================================
     TRANSITIONS
     Use for: transition
     ========================================== */
  --transition-fast: 0.15s ease;        /* Quick interactions */
  --transition-base: 0.2s ease;         /* Standard transitions */
  --transition-slow: 0.3s ease;         /* Deliberate animations */
  --transition-slower: 0.5s ease;       /* Emphasis animations */
  
  /* Specific transition properties */
  --transition-colors: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  --transition-transform: transform 0.2s ease;
  --transition-opacity: opacity 0.2s ease;
  --transition-all: all 0.2s ease;


  /* ==========================================
     Z-INDEX SCALE
     Use for: z-index (maintains stacking order)
     ========================================== */
  --z-base: 1;           /* Base level */
  --z-chart-controls: 10; /* Chart control containers (below headers) */
  --z-sidebar: 50;       /* Sidebars, drawers (below controls bar so dropdowns work) */
  --z-overlay: 250;      /* Backdrop overlays (below headers so they stay visible) */
  --z-sticky: 550;       /* Sticky headers (workspace header - above backdrop) */
  --z-header: 600;       /* Fixed headers (menu bar - above backdrop) */
  --z-modal: 700;        /* Modal dialogs */
  --z-popover: 800;      /* Popovers */
  --z-tooltip: 900;      /* Tooltips (highest UI) */
  --z-dropdown: 1000;    /* Dropdowns (must be above headers/sidebars) */
  --z-max: 9999;         /* Emergency override (use sparingly!) */


  /* ==========================================
     SHADOWS
     Use for: box-shadow
     ========================================== */
  --shadow-none: none;
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 5%);
  --shadow-base: 0 1px 3px rgb(0 0 0 / 10%);
  --shadow-md: 0 4px 6px rgb(0 0 0 / 10%);
  --shadow-lg: 0 10px 15px rgb(0 0 0 / 10%);
  --shadow-xl: 0 20px 25px rgb(0 0 0 / 15%);
  --shadow-2xl: 0 25px 50px rgb(0 0 0 / 25%);
  --shadow-inner: inset 0 2px 4px rgb(0 0 0 / 6%);


  /* ==========================================
     LAYOUT DIMENSIONS
     Common widths and heights
     ========================================== */
  --menu-bar-height: 72px;
  --portfolio-header-height: 56px;
  --sidebar-width: 280px;
  --sidebar-width-collapsed: 64px;
  
  /* Icon button sizes */
  --icon-btn-size: 36px;
  
  /* Container max-widths */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;
  --container-2xl: 1536px;
  --container-full: 100%;


  /* ==========================================
     RESPONSIVE BREAKPOINTS
     Standard breakpoints used across the app
     ========================================== */
  --breakpoint-mobile: 768px;    /* Mobile: ≤768px */
  --breakpoint-tablet: 1024px;   /* Tablet: 769px - 1024px */
  --breakpoint-desktop: 1025px;  /* Desktop: ≥1025px */
  --breakpoint-wide: 1920px;     /* Ultra-wide: ≥1920px */


  /* ==========================================
     TIMING FUNCTIONS
     Use for: transition-timing-function
     ========================================== */
  --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);
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);


  /* ==========================================
     OPACITY-BASED BACKGROUNDS
     Use for: semi-transparent backgrounds with theme colors
     ========================================== */
  --primary-bg-subtle: rgba(var(--primary-color-rgb), 0.1);
  --primary-bg-light: rgba(var(--primary-color-rgb), 0.15);
  --primary-bg-medium: rgba(var(--primary-color-rgb), 0.2);

  /* Semantic color backgrounds with opacity */
  --success-bg-subtle: rgba(var(--success-rgb), 0.15);
  --error-bg-subtle: rgba(var(--error-rgb), 0.15);
  --neutral-bg-subtle: rgba(var(--text-secondary-rgb), 0.15);

  /* Badge system colors */
  --badge-user-bg: rgba(var(--primary-color-rgb), 0.15);
  --badge-user-text: var(--primary-color);
  --badge-auto-bg: rgba(var(--aa-purple-500-rgb), 0.15);
  --badge-auto-text: var(--aa-purple-500);
  --badge-import-bg: rgba(var(--aa-blue-500-rgb), 0.15);
  --badge-import-text: var(--aa-blue-500);
}


/* ==========================================
   DARK THEME ADJUSTMENTS
   Some values may need adjustment in dark mode
   ========================================== */
[data-theme="dark"] {
  /* Shadows are more subtle in dark mode */
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 30%);
  --shadow-base: 0 1px 3px rgb(0 0 0 / 40%);
  --shadow-md: 0 4px 6px rgb(0 0 0 / 40%);
  --shadow-lg: 0 10px 15px rgb(0 0 0 / 50%);
  --shadow-xl: 0 20px 25px rgb(0 0 0 / 60%);
  --shadow-2xl: 0 25px 50px rgb(0 0 0 / 70%);
}


/* ==========================================
   MIGRATION NOTES
   
   This file provides design system tokens that can
   gradually replace hardcoded values throughout the
   codebase.
   
   BEFORE:
   .my-card {
     padding: 1.5rem;
     gap: 1rem;
     border-radius: 8px;
     font-size: 0.875rem;
     transition: all 0.2s;
     box-shadow: 0 1px 3px rgba(0,0,0,0.1);
   }
   
   AFTER:
   .my-card {
     padding: var(--padding-card);
     gap: var(--space-md);
     border-radius: var(--radius-lg);
     font-size: var(--text-sm);
     transition: var(--transition-all);
     box-shadow: var(--shadow-base);
   }
   
   BENEFITS:
   - Consistent design system
   - Easy to adjust globally
   - Better maintainability
   - Clearer intent in code
   ========================================== */