/* lot-theme.css — Dark/light theme variable definitions.
   Source of truth: /Users/thti/Downloads/lot-unified-v2.html (Stitch mockup).
*/

/* ============================================
   SHARED tokens (both themes)
   ============================================ */
:root {
    --lot-radius-sm: 6px;
    --lot-radius: 8px;
    --lot-radius-lg: 12px;

    /* Sidebar widths — referenced by the pin toggle in Phase 3 */
    --lot-sidebar-w-collapsed: 52px;
    --lot-sidebar-w-expanded: 220px;
}

/* ============================================
   LIGHT MODE
   ============================================ */
.body--light {
    --lot-bg-root: #FFFFFF;
    --lot-bg-surface: #F8FAFC;
    --lot-bg-surface-hover: #F8FAFC;
    --lot-bg-card: #FFFFFF;
    --lot-bg-card-hover: #F8FAFC;
    --lot-bg-input: #F1F5F9;
    --lot-bg-inset: #F1F5F9;
    --lot-bg-sidebar: #FFFFFF;
    --lot-bg-badge: #E2E8F0;

    --lot-text-primary: #0F172A;
    --lot-text-secondary: #475569;
    --lot-text-muted: #94A3B8;

    --lot-border: #E5E7EB;
    --lot-border-hover: #CBD5E1;

    --lot-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
    --lot-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --lot-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.08);
    --lot-shadow-card: 0 1px 3px rgba(0, 0, 0, 0.06), 0 2px 6px rgba(0, 0, 0, 0.04);
    --lot-shadow-hover: 0 8px 16px rgba(0, 0, 0, 0.06);

    --lot-sidebar-active-bg: #EEF3FB;
    --lot-sidebar-active-text: #003D8F;

    /* Brand (mockup-aligned) */
    --lot-brand: #003D8F;
    --lot-brand-hover: #002D6B;
    --lot-brand-light: #EEF3FB;
    --lot-brand-text: #003D8F;
    --lot-brand-soft: rgba(0, 61, 143, 0.05);

    /* Tool-specific palettes (5 core tools) */
    --tool-descale-bg: #EEF3FB;    --tool-descale-icon: #003D8F;
    --tool-productno-bg: #EEEDFE;  --tool-productno-icon: #534AB7;
    --tool-bom-bg: #E1F5EE;        --tool-bom-icon: #0F6E56;
    --tool-liquid-bg: #FAEEDA;     --tool-liquid-icon: #BA7517;
    --tool-gascool-bg: #E6F1FB;    --tool-gascool-icon: #185FA5;

    /* Droplets section tint */
    --droplets-section-bg: rgba(0, 61, 143, 0.03);

    /* Spotlight gradient */
    --spotlight-bg: linear-gradient(135deg, #EEF3FB 0%, #EEEDFE 100%);
    --spotlight-border: #D4DFF0;

    /* Lock overlay */
    --lock-overlay: rgba(255, 255, 255, 0.6);

    /* Grid dot background for ambient surfaces */
    --grid-dot: rgba(0, 61, 143, 0.03);

    /* Badges */
    --badge-ok-bg: rgba(16, 185, 129, 0.12);    --badge-ok-fg: #10B981;
    --badge-locked-bg: rgba(100, 116, 139, 0.12); --badge-locked-fg: #64748B;
    --badge-pending-bg: rgba(245, 158, 11, 0.15); --badge-pending-fg: #B45309;

    /* Accents */
    --accent-green: #10B981;
    --accent-amber: #F59E0B;
    --accent-red: #EF4444;

    /* Code/preview surfaces */
    --lot-code-bg: #F1F5F9;
    --lot-preview-bg: #F8FAFC;
    --lot-tab-active: #FFFFFF;
}

/* ============================================
   DARK MODE (first-visit default — see lot/ui/theme.py)
   ============================================ */
.body--dark {
    --lot-bg-root: #000000;
    --lot-bg-surface: #0A0A0A;
    --lot-bg-surface-hover: #161616;
    --lot-bg-card: #111111;
    --lot-bg-card-hover: #161616;
    --lot-bg-input: #161616;
    --lot-bg-inset: #0F0F0F;
    --lot-bg-sidebar: #0A0A0A;
    --lot-bg-badge: #1E293B;

    --lot-text-primary: #F1F5F9;
    --lot-text-secondary: #94A3B8;
    --lot-text-muted: #64748B;

    --lot-border: #1A1A1A;
    --lot-border-hover: #2A2A2A;

    --lot-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
    --lot-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --lot-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.4);
    --lot-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 8px rgba(0, 0, 0, 0.15);
    --lot-shadow-hover: 0 8px 16px rgba(0, 0, 0, 0.3);

    --lot-sidebar-active-bg: rgba(107, 163, 232, 0.12);
    --lot-sidebar-active-text: #6BA3E8;

    /* Brand (dark variant) */
    --lot-brand: #6BA3E8;
    --lot-brand-hover: #85B7EB;
    --lot-brand-light: #0D1520;
    --lot-brand-text: #6BA3E8;
    --lot-brand-soft: rgba(107, 163, 232, 0.05);

    /* Tool-specific palettes — dark mode.
       The mockup hex values (#0d1520 etc.) are near-identical to the card
       background #111111, making the preview panes look flat. Bumped these
       to more distinct tints so each card has a clear visual identity
       per the user ask. Icons stay the same. */
    --tool-descale-bg: #122b4a;    --tool-descale-icon: #6BA3E8;
    --tool-productno-bg: #211837;  --tool-productno-icon: #A89BEE;
    --tool-bom-bg: #0f2a20;        --tool-bom-icon: #5DCAA5;
    --tool-liquid-bg: #2a1d0a;     --tool-liquid-icon: #EF9F27;
    --tool-gascool-bg: #0f2438;    --tool-gascool-icon: #85B7EB;

    /* Droplets section tint — the user asked for rgba(0,61,143,0.04) but
       that's invisible against #0a0a0a. Bumping opacity so the blue wash
       actually reads. Still subtle enough to avoid looking like a CTA. */
    --droplets-section-bg: rgba(0, 61, 143, 0.16);

    /* Spotlight gradient — brighter endpoints than the near-black mockup
       values so the card actually reads as a gradient against the black
       page background. Still dark, still blue→purple, but visible. */
    --spotlight-bg: linear-gradient(135deg, #152a44 0%, #251a3d 100%);
    --spotlight-border: #2e3a5e;

    /* Lock overlay */
    --lock-overlay: rgba(0, 0, 0, 0.5);

    /* Grid dot background for ambient surfaces */
    --grid-dot: rgba(255, 255, 255, 0.015);

    /* Badges */
    --badge-ok-bg: rgba(16, 185, 129, 0.18);    --badge-ok-fg: #34D399;
    --badge-locked-bg: rgba(148, 163, 184, 0.18); --badge-locked-fg: #94A3B8;
    --badge-pending-bg: rgba(245, 158, 11, 0.22); --badge-pending-fg: #FBBF24;

    /* Accents */
    --accent-green: #10B981;
    --accent-amber: #F59E0B;
    --accent-red: #EF4444;

    /* Code/preview surfaces */
    --lot-code-bg: #161616;
    --lot-preview-bg: #0A0A0A;
    --lot-tab-active: #111111;
}