/* css/_shared/_variables.css */
/* =============================================================================
   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);

    /* =========================================
       R4O DESIGN-SYSTEM PALETTE (consultant finding R20)
       The bespoke Tailwind-style hexes that JS-rendered UI previously hard-coded,
       promoted to tokens so they theme + dark-mode correctly. Light defaults equal
       the prior hard-coded values, so existing light-mode appearance is unchanged;
       reference these with var() instead of raw hex in JS-rendered HTML.
       Accent tokens (brand/success/danger/...) are for color-on-which-text-is-white
       contexts and hold their hue in dark mode. The neutral surface/text/border
       tokens are SEMANTIC and flip in dark mode (see the dark block below).
       ========================================= */

    /* Brand accents */
    --r4o-brand: #667eea;
    --r4o-brand-2: #764ba2;
    --r4o-brand-soft: #f0f4ff;
    /* Always-white (text on a colored surface) - intentionally does NOT flip in dark mode */
    --r4o-white: #ffffff;

    /* Semantic accent colors (solid fills with white text) */
    --r4o-success: #10b981;
    --r4o-success-strong: #16a34a;
    --r4o-success-soft: #f0fdf4;
    --r4o-green: #22c55e;
    --r4o-danger: #ef4444;
    --r4o-danger-strong: #dc2626;
    --r4o-danger-soft: #fef2f2;
    --r4o-warning: #f59e0b;
    --r4o-info: #3b82f6;
    --r4o-info-soft: #eff6ff;

    /* Neutral surfaces / text / borders (Tailwind gray scale) - semantic, flip in dark mode */
    --r4o-surface: #ffffff;          /* raised surfaces: cards, menus, popovers */
    --r4o-surface-muted: #f9fafb;    /* gray-50  - subtle row/section backgrounds */
    --r4o-surface-muted-2: #f3f4f6;  /* gray-100 - hover/active fills */
    --r4o-border: #e5e7eb;           /* gray-200 - default borders */
    --r4o-border-strong: #d1d5db;    /* gray-300 - emphasized borders */
    --r4o-text-strong: #111827;      /* gray-900 - headings */
    --r4o-text: #1f2937;             /* gray-800 - primary text */
    --r4o-text-body: #374151;        /* gray-700 - body text */
    --r4o-text-faint: #4b5563;       /* gray-600 */
    --r4o-text-muted: #6b7280;       /* gray-500 - muted/secondary text */
    --r4o-text-subtle: #9ca3af;      /* gray-400 - placeholder/disabled */
}

/* =============================================================================
   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: #9ca3af;
    --text-light: #868e96;
    --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: #5a6270;

    /* Shadows (softer for dark backgrounds) */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.4);

    /* 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);
    --bs-border-color-translucent: rgba(255, 255, 255, 0.1);
    --bs-tertiary-bg: var(--bg-tertiary);
    --bs-secondary-bg: var(--bg-secondary);

    /* R20 palette - dark mode. Neutral surfaces darken and text lightens; the solid
       accent hues (brand/success/danger/warning/info/green) and --r4o-white hold, since
       they sit under white text. Soft tints get dark-appropriate equivalents. These are
       sensible defaults aligned with the Bootstrap-token dark values above and should be
       confirmed during dark-mode visual QA as the per-view hex sweep proceeds. */
    --r4o-brand-soft: #2a2f45;
    --r4o-success-soft: #0e2a1d;
    --r4o-danger-soft: #3a1d1d;
    --r4o-info-soft: #14253b;

    --r4o-surface: #2b3035;
    --r4o-surface-muted: #23272b;
    --r4o-surface-muted-2: #2b3035;
    --r4o-border: #3a4047;
    --r4o-border-strong: #495057;
    --r4o-text-strong: #f8f9fa;
    --r4o-text: #e9ecef;
    --r4o-text-body: #dee2e6;
    --r4o-text-faint: #ced4da;
    --r4o-text-muted: #adb5bd;
    --r4o-text-subtle: #868e96;

    color-scheme: dark;
}

/* Explicit body dark background — ensures all layouts (including _NoNavLayout) get dark bg */
[data-bs-theme="dark"] body {
    background-color: var(--bg);
    color: var(--text);
}

/* Dark mode logo switching — show light logo by default, dark logo in dark mode */
.platform-logo-dark { display: none !important; }
.platform-logo-light { display: inline !important; }

[data-bs-theme="dark"] .platform-logo-dark { display: inline !important; }
[data-bs-theme="dark"] .platform-logo-light { display: none !important; }