/* =============================================================================
   UNIFIED CSS VARIABLES
   Path: /css/_shared/_variables.css
   
   Purpose: Single source of truth for all design tokens.
   Load Order: FIRST - before any other CSS files.
   
   Based on: UI-STANDARDS.md, TYPOGRAPHY-STANDARDS.md
   Replaces: Phoenix theme.css variables
   ========================================================================== */

:root {
    /* =========================================
       TYPOGRAPHY SCALE (1.25 modular ratio)
       From: TYPOGRAPHY-STANDARDS.md
       ========================================= */
    
    /* Font Family */
    --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, 
                   "Helvetica Neue", Arial, sans-serif;
    --font-mono: "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", 
                 "Courier New", monospace;
    
    /* Font Sizes */
    --font-xs: 0.75rem;      /* 12px - absolute minimum */
    --font-sm: 0.875rem;     /* 14px - small text, labels, captions */
    --font-base: 1rem;       /* 16px - body text, inputs */
    --font-md: 1.125rem;     /* 18px - h4, emphasized text */
    --font-lg: 1.375rem;     /* 22px - h3 */
    --font-xl: 1.75rem;      /* 28px - h2 */
    --font-2xl: 2.25rem;     /* 36px - h1 */
    --font-3xl: 3rem;        /* 48px - display */
    
    /* Line Heights */
    --leading-none: 1;
    --leading-tight: 1.2;    /* Headings */
    --leading-snug: 1.35;    /* Subheadings, compact UI */
    --leading-normal: 1.5;   /* UI text, forms */
    --leading-relaxed: 1.6;  /* Body paragraphs */
    --leading-loose: 2;      /* Spacious text */
    
    /* Font Weights */
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    --font-extrabold: 800;

    /* =========================================
       SPACING SCALE (4px base unit)
       From: UI-STANDARDS.md
       ========================================= */
    --space-0: 0;
    --space-px: 1px;
    --space-0-5: 0.125rem;   /* 2px */
    --space-1: 0.25rem;      /* 4px - tight gaps, icon margins */
    --space-2: 0.5rem;       /* 8px - small gaps, inline spacing */
    --space-3: 0.75rem;      /* 12px - card padding (compact) */
    --space-4: 1rem;         /* 16px - standard gaps, margins */
    --space-5: 1.5rem;       /* 24px - section padding */
    --space-6: 2rem;         /* 32px - large section gaps */
    --space-8: 3rem;         /* 48px - page sections */
    --space-10: 4rem;        /* 64px - major sections */
    --space-12: 6rem;        /* 96px - hero spacing */

    /* =========================================
       COMPONENT HEIGHTS
       From: UI-STANDARDS.md
       ========================================= */
    --height-xs: 1.5rem;     /* 24px - extra small buttons */
    --height-sm: 2rem;       /* 32px - small buttons/inputs */
    --height-md: 2.5rem;     /* 40px - default buttons/inputs */
    --height-lg: 3rem;       /* 48px - large buttons/inputs */
    --height-xl: 3.5rem;     /* 56px - extra large */
    
    /* Touch target minimum (WCAG 2.1 AAA) */
    --touch-target-min: 44px;

    /* =========================================
       BORDER RADIUS
       From: UI-STANDARDS.md
       ========================================= */
    --radius-none: 0;
    --radius-sm: 0.25rem;    /* 4px - subtle rounding */
    --radius-md: 0.375rem;   /* 6px - default (Bootstrap compatible) */
    --radius-lg: 0.5rem;     /* 8px - cards, modals */
    --radius-xl: 0.75rem;    /* 12px - large cards */
    --radius-2xl: 1rem;      /* 16px - hero elements */
    --radius-full: 9999px;   /* Pills, avatars */

    /* =========================================
       SHADOWS
       From: UI-STANDARDS.md
       ========================================= */
    --shadow-none: none;
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);

    /* =========================================
       TRANSITIONS
       From: UI-STANDARDS.md
       ========================================= */
    --transition-fast: 150ms ease;
    --transition-normal: 200ms ease;
    --transition-slow: 300ms ease;

    /* =========================================
       Z-INDEX SCALE
       From: UI-STANDARDS.md
       ========================================= */
    --z-base: 0;
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-sidebar: 1035;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
    --z-toast: 1080;
    --z-loading: 9999;
    --z-success: 10000;

    /* =========================================
       SEMANTIC COLORS
       Replaces Phoenix theme colors
       ========================================= */
    
    /* Primary - Brand color (overridden by company theme) */
    --primary: #667eea;
    --primary-rgb: 102, 126, 234;
    --primary-hover: #5a6fd6;
    --primary-dark: #4c5bc2;
    --primary-darker: #3d4a9e;
    --primary-light: #8b9ef0;
    --primary-lighter: #c5cff7;
    --primary-text: #ffffff;
    
    /* Secondary (overridden by company theme) */
    --secondary: #764ba2;
    --secondary-rgb: 118, 75, 162;
    --secondary-hover: #6a4392;
    --secondary-dark: #5e3b82;
    --secondary-text: #ffffff;
    
    /* Neutral (overridden by company theme) */
    --neutral: #f8f9fa;
    --neutral-rgb: 248, 249, 250;
    
    /* Success */
    --success: #198754;
    --success-rgb: 25, 135, 84;
    --success-hover: #157347;
    --success-light: #d1e7dd;
    --success-text: #ffffff;
    
    /* Warning */
    --warning: #ffc107;
    --warning-rgb: 255, 193, 7;
    --warning-hover: #e0a800;
    --warning-light: #fff3cd;
    --warning-text: #000000;
    
    /* Danger */
    --danger: #dc3545;
    --danger-rgb: 220, 53, 69;
    --danger-hover: #bb2d3b;
    --danger-light: #f8d7da;
    --danger-text: #ffffff;
    
    /* Info */
    --info: #0dcaf0;
    --info-rgb: 13, 202, 240;
    --info-hover: #0bacce;
    --info-light: #cff4fc;
    --info-text: #000000;

    /* =========================================
       TEXT COLORS
       ========================================= */
    --text: #212529;
    --text-rgb: 33, 37, 41;
    --text-secondary: #495057;
    --text-muted: #6c757d;
    --text-light: #adb5bd;
    --text-inverse: #ffffff;

    /* =========================================
       BACKGROUND COLORS
       ========================================= */
    --bg: #ffffff;
    --bg-rgb: 255, 255, 255;
    --bg-secondary: #f8f9fa;
    --bg-tertiary: #e9ecef;
    --bg-dark: #212529;
    --bg-input: #ffffff;
    --bg-card: #ffffff;

    /* =========================================
       BORDER COLORS
       ========================================= */
    --border: #dee2e6;
    --border-rgb: 222, 226, 230;
    --border-light: #e9ecef;
    --border-dark: #ced4da;
    --border-input: #ced4da;
    --border-focus: var(--primary);

    /* =========================================
       LAYOUT VARIABLES
       ========================================= */
    --navbar-height: 56px;
    --sidebar-width: 200px;
    --container-max-width: 1400px;
    --content-max-width: 1200px;

    /* =========================================
       BOOTSTRAP OVERRIDES
       Ensures Bootstrap uses our tokens
       ========================================= */
    --bs-font-sans-serif: var(--font-family);
    --bs-font-monospace: var(--font-mono);
    --bs-body-font-family: var(--font-family);
    --bs-body-font-size: var(--font-base);
    --bs-body-font-weight: var(--font-normal);
    --bs-body-line-height: var(--leading-normal);
    --bs-body-color: var(--text);
    --bs-body-color-rgb: var(--text-rgb);
    --bs-body-bg: var(--bg-secondary);
    --bs-body-bg-rgb: 248, 249, 250;
    
    --bs-primary: var(--primary);
    --bs-primary-rgb: var(--primary-rgb);
    --bs-secondary: var(--secondary);
    --bs-secondary-rgb: var(--secondary-rgb);
    --bs-success: var(--success);
    --bs-success-rgb: var(--success-rgb);
    --bs-info: var(--info);
    --bs-info-rgb: var(--info-rgb);
    --bs-warning: var(--warning);
    --bs-warning-rgb: var(--warning-rgb);
    --bs-danger: var(--danger);
    --bs-danger-rgb: var(--danger-rgb);
    
    --bs-link-color: var(--primary);
    --bs-link-color-rgb: var(--primary-rgb);
    --bs-link-hover-color: var(--primary-hover);
    
    --bs-border-width: 1px;
    --bs-border-color: var(--border);
    --bs-border-color-translucent: rgba(0, 0, 0, 0.1);
    --bs-border-radius: var(--radius-md);
    --bs-border-radius-sm: var(--radius-sm);
    --bs-border-radius-lg: var(--radius-lg);
    --bs-border-radius-xl: var(--radius-xl);
    --bs-border-radius-xxl: var(--radius-2xl);
    --bs-border-radius-pill: var(--radius-full);
    
    --bs-box-shadow: var(--shadow-md);
    --bs-box-shadow-sm: var(--shadow-sm);
    --bs-box-shadow-lg: var(--shadow-lg);
}

/* =============================================================================
   DARK MODE SUPPORT (Optional - for future use)
   ========================================================================== */
[data-bs-theme="dark"] {
    /* Text colors */
    --text: #e9ecef;
    --text-rgb: 233, 236, 239;
    --text-secondary: #adb5bd;
    --text-muted: #6c757d;
    --text-light: #495057;
    --text-inverse: #212529;

    /* Background colors */
    --bg: #212529;
    --bg-rgb: 33, 37, 41;
    --bg-secondary: #2b3035;
    --bg-tertiary: #343a40;
    --bg-dark: #000000;
    --bg-input: #343a40;
    --bg-card: #2b3035;

    /* Border colors */
    --border: #495057;
    --border-rgb: 73, 80, 87;
    --border-light: #343a40;
    --border-dark: #6c757d;
    --border-input: #495057;

    /* Bootstrap dark mode overrides */
    --bs-body-color: var(--text);
    --bs-body-color-rgb: var(--text-rgb);
    --bs-body-bg: var(--bg);
    --bs-body-bg-rgb: var(--bg-rgb);
    --bs-border-color: var(--border);
}