/**
 * AI Text Refinement - CSS Variables
 * Single source of truth for all styling constants
 * 
 * Usage: var(--refiner-spacing-md)
 * DO NOT use magic values in component CSS!
 */

:root {
    /* === SPACING === */
    --refiner-spacing-xs: 0.25rem;    /* 4px */
    --refiner-spacing-sm: 0.5rem;     /* 8px */
    --refiner-spacing-md: 1rem;       /* 16px */
    --refiner-spacing-lg: 1.5rem;     /* 24px */
    --refiner-spacing-xl: 2rem;       /* 32px */
    
    /* === SIZING === */
    --refiner-modal-width: 90vw;
    --refiner-modal-max-width: 1200px;
    --refiner-modal-height: 90vh;
    --refiner-modal-max-height: 900px;
    
    --refiner-diff-max-height: 500px;
    --refiner-section-min-height: 60px;
    
    /* === BORDERS === */
    --refiner-border-radius: 0.375rem;        /* Bootstrap default */
    --refiner-border-radius-lg: 0.5rem;
    --refiner-border-width: 1px;
    
    /* === TRANSITIONS === */
    --refiner-transition-fast: 0.15s ease;
    --refiner-transition-normal: 0.2s ease;
    --refiner-transition-slow: 0.3s ease;
    
    /* === Z-INDEX LAYERS === */
    --refiner-z-backdrop: 1050;
    --refiner-z-modal: 1055;
    --refiner-z-dropdown: 1060;
    
    /* === DIFF COLORS (Light Mode) === */
    --refiner-diff-added-bg: #e6ffed;
    --refiner-diff-added-fg: #1a7f37;
    --refiner-diff-removed-bg: #ffebe9;
    --refiner-diff-removed-fg: #cf222e;
    --refiner-diff-modified-bg: #fff8c5;
    --refiner-diff-modified-fg: #9a6700;
    --refiner-diff-context-fg: var(--bs-secondary-color);
    
    /* === QUALITY METER COLORS === */
    --refiner-quality-excellent: #198754;  /* Green */
    --refiner-quality-good: #0d6efd;       /* Blue */
    --refiner-quality-fair: #ffc107;       /* Yellow */
    --refiner-quality-poor: #dc3545;       /* Red */
    
    /* === FONTS === */
    --refiner-font-mono: 'Consolas', 'Monaco', 'Courier New', monospace;
    --refiner-font-size-sm: 0.875rem;
    --refiner-line-height-code: 1.5;
}

/* === DARK MODE OVERRIDES === */
[data-bs-theme="dark"] {
    /* Diff colors for dark mode */
    --refiner-diff-added-bg: rgba(46, 160, 67, 0.15);
    --refiner-diff-added-fg: #3fb950;
    --refiner-diff-removed-bg: rgba(248, 81, 73, 0.15);
    --refiner-diff-removed-fg: #f85149;
    --refiner-diff-modified-bg: rgba(187, 128, 9, 0.15);
    --refiner-diff-modified-fg: #d29922;
    --refiner-diff-context-fg: var(--bs-secondary-color);
}

/* === RESPONSIVE BREAKPOINTS === */
/* Use Bootstrap's standard breakpoints:
   - xs: <576px (mobile)
   - sm: ≥576px (mobile landscape)
   - md: ≥768px (tablet)
   - lg: ≥992px (desktop)
   - xl: ≥1200px (large desktop)
   - xxl: ≥1400px (extra large)
*/