/* Header Tracker - Theme System */
/* Dark/Light theme tokens using CSS custom properties */

/* ========================================
   DARK THEME (Default)
   ======================================== */

.ht-dark {
    /* Core backgrounds */
    --ht-bg: #1a1a1a;
    --ht-bg-secondary: #222222;

    /* Primary brand color (navbar) */
    --ht-primary: #4a1515;

    /* Accent color (buttons, highlights) */
    --ht-accent: #d4af37;

    /* Card/panel backgrounds */
    --ht-card: #2a2a2a;

    /* Tile backgrounds (dashboard stats, inventory items, etc.) */
    --ht-tile: #374151;
    --ht-tile-hover: #4b5563;

    /* Text colors */
    --ht-text: #ffffff;
    --ht-text-secondary: #e5e5e5;
    --ht-text-muted: #a0a0a0;

    /* Border color */
    --ht-border: rgba(255, 255, 255, 0.12);
    --ht-border-strong: rgba(255, 255, 255, 0.2);

    /* Input backgrounds */
    --ht-input-bg: #4b5563;
    --ht-input-border: rgba(255, 255, 255, 0.15);

    /* Shadow adjustments for dark mode */
    --ht-shadow-card:
        0 2px 8px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* ========================================
   LIGHT THEME
   ======================================== */

.ht-light {
    /* Core backgrounds */
    --ht-bg: #f5f5f7;
    --ht-bg-secondary: #eeeeef;

    /* Primary brand color (navbar) - slightly lighter maroon for light mode */
    --ht-primary: #722f37;

    /* Accent color (buttons, highlights) - same gold */
    --ht-accent: #d4af37;

    /* Card/panel backgrounds */
    --ht-card: #ffffff;

    /* Tile backgrounds */
    --ht-tile: #ffffff;
    --ht-tile-hover: #f0f0f0;

    /* Text colors */
    --ht-text: #1d1d1f;
    --ht-text-secondary: #424245;
    --ht-text-muted: #6e6e73;

    /* Border color */
    --ht-border: rgba(0, 0, 0, 0.12);
    --ht-border-strong: rgba(0, 0, 0, 0.2);

    /* Input backgrounds */
    --ht-input-bg: #ffffff;
    --ht-input-border: rgba(0, 0, 0, 0.15);

    /* Shadow adjustments for light mode */
    --ht-shadow-card:
        0 2px 8px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.06);
}

/* ========================================
   THEME VARIABLE MAPPINGS
   Only override when explicitly needed
   ======================================== */

/* Commented out - let original variables.css handle defaults
.ht-dark,
.ht-light {
    --color-bg: var(--ht-bg);
    --color-bg-secondary: var(--ht-bg-secondary);
    --color-bg-elevated: var(--ht-card);
    --color-surface: var(--ht-tile);
    --color-surface-light: var(--ht-tile);
    --color-surface-hover: var(--ht-tile-hover);
    --color-text: var(--ht-text);
    --color-text-secondary: var(--ht-text-secondary);
    --color-text-muted: var(--ht-text-muted);
    --color-border: var(--ht-border);
    --color-border-light: var(--ht-border);
    --color-border-strong: var(--ht-border-strong);
    --color-input-bg: var(--ht-input-bg);
    --color-input-border: var(--ht-input-border);
    --color-input-text: var(--ht-text);
    --shadow-card: var(--ht-shadow-card);
}
*/

/* ========================================
   GLOBAL COMPONENT OVERRIDES
   Apply theme vars to common components
   ======================================== */

html.ht-dark .stat-card,
html.ht-light .stat-card {
    background: var(--ht-tile) !important;
    border: 1px solid var(--ht-border) !important;
    transition: background 150ms ease;
}

html.ht-dark .stat-card:hover,
html.ht-light .stat-card:hover {
    background: var(--ht-tile-hover) !important;
}

html.ht-dark .card,
html.ht-light .card {
    background: var(--ht-card) !important;
    border: 1px solid var(--ht-border) !important;
}

html.ht-dark .btn-primary,
html.ht-light .btn-primary {
    background: var(--ht-accent) !important;
    border-color: var(--ht-accent) !important;
    color: #000 !important;
}

html.ht-dark .btn-primary:hover:not(:disabled),
html.ht-light .btn-primary:hover:not(:disabled) {
    filter: brightness(1.1);
}

html.ht-dark .btn-primary:active:not(:disabled),
html.ht-light .btn-primary:active:not(:disabled) {
    filter: brightness(0.95);
}

html.ht-dark .navbar,
html.ht-light .navbar {
    background: var(--ht-primary) !important;
}

/* ========================================
   THEME TOGGLE BUTTON STYLES
   ======================================== */

#ht-theme-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    background: var(--ht-card);
    border: 1px solid var(--ht-border);
    border-radius: 9999px;
    color: var(--ht-text);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 150ms ease;
    margin-right: 12px;
}

#ht-theme-toggle:hover {
    background: var(--ht-tile-hover);
    border-color: var(--ht-border-strong);
}

#ht-theme-toggle .theme-icon {
    font-size: 14px;
    line-height: 1;
}