/**
 * AI Daily Digest - Theme CSS Variables
 * Supports: Dark (default) and Light themes
 * Brand Color: Teal (#14b8a6)
 */

/* ===== Default: Dark Theme ===== */
:root {
    /* Backgrounds */
    --theme-bg-primary: #0a0a0a;
    --theme-bg-secondary: #1a1a1a;
    --theme-bg-card: #1a1a1a;
    --theme-bg-tertiary: #21262d;
    --theme-bg-modal: rgba(0, 0, 0, 0.9);

    /* Text */
    --theme-text-primary: #e0e0e0;
    --theme-text-secondary: #888;
    --theme-text-muted: #666;

    /* Accent (Teal) */
    --theme-accent: #14b8a6;
    --theme-accent-hover: #0d9488;
    --theme-accent-text: #000;

    /* Borders */
    --theme-border: #333;
    --theme-border-light: #444;

    /* Status */
    --theme-success: #10b981;
    --theme-error: #ef4444;
    --theme-warning: #f97316;

    /* Shadows */
    --theme-shadow: rgba(0, 0, 0, 0.3);
}

/* ===== Light Theme ===== */
:root[data-theme="light"] {
    /* Backgrounds */
    --theme-bg-primary: #ffffff;
    --theme-bg-secondary: #f5f5f5;
    --theme-bg-card: #ffffff;
    --theme-bg-tertiary: #e8e8e8;
    --theme-bg-modal: rgba(255, 255, 255, 0.95);

    /* Text */
    --theme-text-primary: #1a1a1a;
    --theme-text-secondary: #555;
    --theme-text-muted: #888;

    /* Accent (Teal - slightly darker for light bg) */
    --theme-accent: #0d9488;
    --theme-accent-hover: #0f766e;
    --theme-accent-text: #fff;

    /* Borders */
    --theme-border: #ddd;
    --theme-border-light: #ccc;

    /* Shadows */
    --theme-shadow: rgba(0, 0, 0, 0.1);
}

/* ===== Theme Toggle Button ===== */
.theme-toggle {
    background: transparent;
    border: 1px solid var(--theme-border);
    border-radius: 6px;
    padding: 0.35rem 0.5rem;
    cursor: pointer;
    color: var(--theme-text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    min-width: 36px;
    height: 32px;
}

.theme-toggle:hover {
    color: var(--theme-accent);
    border-color: var(--theme-accent);
}

.theme-toggle .theme-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.theme-toggle .theme-icon svg {
    width: 18px;
    height: 18px;
}

/* ===== Smooth Transitions ===== */
body,
body * {
    transition: background-color 0.2s ease,
                color 0.2s ease,
                border-color 0.2s ease,
                box-shadow 0.2s ease;
}

/* Disable transitions on page load to prevent FOUC */
.no-transition,
.no-transition * {
    transition: none !important;
}