/* =============================================================================
   variables.css — Design Tokens for Optic Up
   =============================================================================
   Single source of truth for ALL visual values in the design system.
   Every value here was extracted from css/styles.css (the existing production stylesheet).

   Rules:
   - components.css, layout.css, forms.css must ONLY use var(--...) from this file
   - Zero hardcoded colors, font-sizes, spacing, or radii outside :root
   - Tenant override: loadTenantTheme() injects per-tenant values from DB on top of these defaults
   - The defaults below are tenant-neutral (near-black + slate scale). Per-tenant brand color lives in tenants.ui_config.
   ============================================================================= */

:root {

  /* =========================================================================
     1. COLORS — PRIMARY
     Source: styles.css :root (--primary, --primary-light, --primary-dark)
     ========================================================================= */
  --color-primary:        #0f172a;  /* Slate 900 — neutral platform default (near-black, Daniel decision 2026-05-10) */
  --color-primary-hover:  #1e293b;  /* Slate 800 — hover lightens (near-black primary can't go darker) */
  --color-primary-light:  #f1f5f9;  /* Slate 100 — light backgrounds, badges, selected rows */
  --color-primary-dark:   #000000;  /* pure black — text-on-light extreme */

  /* Legacy alias — bridges old --primary consumers (header.css, index.html)
     until full migration to --color-primary is complete */
  --primary:              var(--color-primary);

  /* =========================================================================
     2. COLORS — SEMANTIC
     Source: styles.css :root (--success, --error, --warn, --accent)
     + alert backgrounds (.alert-s, .alert-e, .alert-w, .alert-i)
     + button hover states (.btn-s:hover, .btn-d:hover, .btn-w:hover, .btn-p:hover)
     ========================================================================= */

  /* Success */
  --color-success:        #10b981;  /* from --success */
  --color-success-light:  #d1fae5;  /* from .alert-s background */
  --color-success-hover:  #059669;  /* from .btn-s:hover */

  /* Error */
  --color-error:          #ef4444;  /* from --error */
  --color-error-light:    #fee2e2;  /* from .alert-e background */
  --color-error-hover:    #dc2626;  /* from .btn-d:hover */

  /* Warning */
  --color-warning:        #f59e0b;  /* from --warn */
  --color-warning-light:  #fef3c7;  /* from .alert-w background */
  --color-warning-hover:  #d97706;  /* from .btn-w:hover */

  /* Info (mapped from --accent) */
  --color-info:           #3b82f6;  /* from --accent — buttons, focus rings, spinners, info messages */
  --color-info-light:     #dbeafe;  /* from .alert-i background */
  --color-info-hover:     #2563eb;  /* from .btn-p:hover */

  /* Badge / alert dark text colors (dark on light backgrounds) */
  --color-success-dark:   #166534;  /* from .badge-green, .alert-s color, .rcpt-status-confirmed */
  --color-error-dark:     #991b1b;  /* from .alert-e color, .rcpt-status-cancelled */
  --color-warning-dark:   #92400e;  /* from .alert-w color, .badge-orange, .rcpt-status-draft */
  --color-info-dark:      #1e40af;  /* from .alert-i color, .badge-blue, .rcpt-new-badge */

  /* =========================================================================
     3. COLORS — NEUTRAL (Gray Scale)
     Source: styles.css :root --g100 through --g700 (Tailwind gray palette)
     Missing: g600, g800, g900, g50, black — interpolated from Tailwind gray scale
     ========================================================================= */
  --color-white:          #ffffff;  /* from --white */
  --color-gray-50:        #f8fafc;  /* Slate 50 — lightest bg */
  --color-gray-100:       #f1f5f9;  /* Slate 100 — hover bg, stat item bg */
  --color-gray-200:       #e2e8f0;  /* Slate 200 — borders, dividers, badge-gray bg */
  --color-gray-300:       #cbd5e1;  /* Slate 300 — input borders, separators */
  --color-gray-400:       #94a3b8;  /* Slate 400 — placeholder text, no-img, muted icons */
  --color-gray-500:       #64748b;  /* Slate 500 — label text, inactive nav, muted text */
  --color-gray-600:       #475569;  /* Slate 600 — secondary text */
  --color-gray-700:       #334155;  /* Slate 700 — body text, strong labels */
  --color-gray-800:       #1e293b;  /* Slate 800 — dark text */
  --color-gray-900:       #0f172a;  /* Slate 900 — headings, near-black */
  --color-black:          #000000;  /* pure black — used for camera video bg */

  /* =========================================================================
     4. COLORS — BACKGROUND
     Source: styles.css body, .card, input default background
     ========================================================================= */
  --color-bg-page:        #f5f5f5;  /* from --bg — body background */
  --color-bg-card:        #ffffff;  /* from .card background — cards, modals, dropdowns */
  --color-bg-input:       #ffffff;  /* from input default — no explicit bg in styles.css, browser default white */

  /* =========================================================================
     5. TYPOGRAPHY
     Source: styles.css body font-family, various font-size declarations
     ========================================================================= */
  --font-family:          'Heebo', sans-serif;  /* from body */

  /* Font sizes — consolidated from 15+ ad-hoc values in styles.css.
     Each token maps to a range of original values (see comments). */
  --font-size-xs:         0.75rem;  /* replaces: 0.75rem (bulk-field label, no-img, ocr-hint, rcpt-new-badge) */
  --font-size-sm:         0.85rem;  /* replaces: 0.78-0.85rem range (labels, btn-sm, captions, td input, settings labels, table font) */
  --font-size-md:         0.92rem;  /* replaces: 0.88-0.95rem range — BASE size (body, nav, .btn, alert, toast, input) */
  --font-size-lg:         1.1rem;   /* replaces: 1.0-1.15rem range (section titles, card h3, sub-choice, gear btn) */
  --font-size-xl:         1.4rem;   /* replaces: 1.3-1.5rem range (logo, settings-title, stat numbers) */
  --font-size-2xl:        1.8rem;   /* replaces: 1.8-2.0rem range (summary-card .num, slog-card .num, sub-choice icon) */

  /* Font weights */
  --font-weight-normal:   400;
  --font-weight-medium:   500;  /* nav buttons, labels */
  --font-weight-semibold: 600;  /* .btn, th, badges, settings labels */
  --font-weight-bold:     700;  /* logo, active nav, stat numbers, card-num */

  /* Line heights */
  --line-height-tight:    1.25;  /* compact elements */
  --line-height-normal:   1.5;   /* default body text */
  --line-height-relaxed:  1.75;  /* help-banner-content (line-height: 1.7 in styles.css) */

  /* =========================================================================
     6. SPACING
     Source: styles.css padding/margin/gap values (range: 2px–48px)
     Consolidated into a 6-step scale based on usage frequency.
     ========================================================================= */
  --space-xs:             4px;   /* replaces: 2-4px (label margin-bottom, micro gaps, badge padding) */
  --space-sm:             8px;   /* replaces: 6-8px (td padding, small gaps, card-row gap, icon gaps) */
  --space-md:             12px;  /* replaces: 10-14px (form-row gap, header padding, common margins, gap between items) */
  --space-lg:             16px;  /* replaces: 16px (card h3 margin, section gaps, card padding mobile, OCR panel padding) */
  --space-xl:             24px;  /* replaces: 20-24px (card padding, main padding, header padding, sub-choice padding) */
  --space-2xl:            32px;  /* replaces: 28-48px (loading-box padding, divider margin, modal padding) */

  /* =========================================================================
     7. BORDER RADIUS
     Source: styles.css border-radius declarations
     ========================================================================= */
  --radius-sm:            6px;    /* from td input, card-field input, bulk-field, search-select, qty-btn, logo-preview */
  --radius-md:            8px;    /* from input/select/textarea, .btn, table-wrap, alert, toast, badges */
  --radius-lg:            10px;   /* from --radius — .card, .item-card, .modal, settings-section */
  --radius-full:          9999px; /* pill shapes — admin-btn (20px), worker-badge (20px) generalized */

  /* =========================================================================
     8. SHADOWS
     Source: styles.css box-shadow declarations
     ========================================================================= */
  --shadow-sm:            0 2px 8px rgba(0, 0, 0, 0.08);   /* from --shadow — cards, sections, stat items */
  --shadow-md:            0 4px 16px rgba(0, 0, 0, 0.18);   /* DERIVED — midpoint between card shadow and modal shadow, close to toast (0 4px 16px .2) and dropdown (0 8px 24px .18) */
  --shadow-lg:            0 12px 40px rgba(0, 0, 0, 0.25);  /* from .modal box-shadow */

  /* =========================================================================
     9. Z-INDEX SCALE
     Values match existing styles.css to ensure coexistence during migration.
     During Phase 1-4, both styles.css and shared/css/ coexist — z-index values
     must be compatible. These are NOT a clean 100-500 scale; they match production.
     ========================================================================= */
  --z-dropdown:           9999;   /* from .ss-dropdown — must be above everything */
  --z-sticky:             200;    /* for shared sticky headers — above nav (99), below overlays */
  --z-overlay:            300;    /* for shared overlays — between sticky and modal */
  --z-modal:              1000;   /* from .modal-overlay, .ai-config-modal */
  --z-toast:              2000;   /* from #toast-c */

  /* =========================================================================
     10. TRANSITIONS
     Source: styles.css transition declarations
     ========================================================================= */
  --transition-fast:      150ms ease;  /* from .qty-btn (all .15s), .ss-item (background .15s) */
  --transition-normal:    200ms ease;  /* from nav button, .btn, .sub-choice, .card (all .2s) — most common */
  --transition-slow:      300ms ease;  /* from toast @keyframes slideIn (.3s ease) */

  /* =========================================================================
     11. FOCUS — accessibility (Phase 2 — Design System)
     Source: WCAG 2.4.7 (Focus Visible) + Brief Contract D
     ========================================================================= */
  --color-focus-ring:     var(--color-primary);  /* tracks primary by default; tenant can override to a contrasting color */
  --shadow-focus:         0 0 0 3px rgba(15, 23, 42, 0.35);  /* 3px ring, near-black at 35% — visible on light AND on primary-colored backgrounds */

  /* =========================================================================
     12. NAVY ACCENT (Hybrid+Navy design system, 2026-05-11)
     Additive tokens for the staged page-by-page migration to Hybrid+Navy.
     Existing tokens (--color-primary, --primary, etc.) remain unchanged
     until all 4 production migrations complete (Brief Locked Decision #5).
     ========================================================================= */
  --accent-navy:           #1e3a8a;  /* primary action — Hybrid+Navy */
  --accent-navy-hover:     #1e40af;  /* hover state */
  --accent-navy-soft:      #e6f1fb;  /* selected row, badge bg, hero wash */
  --accent-navy-text:      #ffffff;  /* on Navy */
  --text-slate-primary:    #0f172a;  /* deep slate body — alias of --color-gray-900, named for migration clarity */
  --text-slate-secondary:  #475569;  /* secondary slate body — alias of --color-gray-600 */
}