/* ============================================================
   THEMES.CSS — Boredom Eraser
   Dark/Light theme system, palettes, responsive scaling, fullscreen
   ============================================================ */

/* ------------------------------------------------------------
   1. BASE THEME VARIABLES
------------------------------------------------------------ */
:root {
    --bg-color: #000000;
    --text-color: #00FF00;
    --border-color: #00FF00;
    --accent: #ff0000;
    --accent-dark: #8b0000;
    --card-bg: #111111;
    --muted: #888888;
}

body.light-theme {
    --bg-color: #f5f5f5;
    --text-color: #1a1a1a;
    --border-color: #1a1a1a;
    --accent: #ff0000;
    --accent-dark: #8b0000;
    --card-bg: #ffffff;
    --muted: #666666;
}

body {
    background-color: var(--bg-color) !important;
    color: var(--text-color) !important;
    transition: background-color 0.4s ease, color 0.4s ease;
}

#terminal-container,
.cursor {
    color: var(--text-color);
}
.cursor {
    background-color: var(--text-color) !important;
}
#content-display {
    border-color: var(--border-color) !important;
}

/* ------------------------------------------------------------
   2. THEME TOGGLE BUTTON
------------------------------------------------------------ */
#theme-toggle {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 999;
    background: var(--bg-color);
    color: var(--text-color);
    border: 2px solid var(--text-color);
    border-radius: 8px;
    padding: 8px 14px;
    font-family: 'Courier Prime', monospace;
    font-weight: bold;
    cursor: pointer;
    transition: transform 0.2s ease, background 0.3s ease, color 0.3s ease;
}
#theme-toggle:hover {
    transform: scale(1.05);
}
#theme-toggle:active {
    transform: scale(0.95);
}

/* ------------------------------------------------------------
   3. ALTERNATE COLOR PALETTES
   Apply as additional body classes, e.g. body.palette-amber
------------------------------------------------------------ */
body.palette-amber {
    --text-color: #ffb000;
    --border-color: #ffb000;
    --accent: #ff4500;
    --accent-dark: #b23000;
}
body.palette-blue {
    --text-color: #00bfff;
    --border-color: #00bfff;
    --accent: #ff6a00;
    --accent-dark: #b34c00;
}
body.palette-pink {
    --text-color: #ff66cc;
    --border-color: #ff66cc;
    --accent: #6600ff;
    --accent-dark: #4400aa;
}
body.palette-mono {
    --text-color: #cccccc;
    --border-color: #cccccc;
    --accent: #ffffff;
    --accent-dark: #999999;
}
body.palette-forest {
    --text-color: #7CFC00;
    --border-color: #228B22;
    --accent: #FF8C00;
    --accent-dark: #B8860B;
}

/* Light-theme variants of palettes */
body.light-theme.palette-amber {
    --text-color: #b35900;
    --border-color: #b35900;
}
body.light-theme.palette-blue {
    --text-color: #0066aa;
    --border-color: #0066aa;
}
body.light-theme.palette-pink {
    --text-color: #aa0066;
    --border-color: #aa0066;
}
body.light-theme.palette-mono {
    --text-color: #333333;
    --border-color: #333333;
}
body.light-theme.palette-forest {
    --text-color: #2e7d32;
    --border-color: #2e7d32;
}

/* Palette quick-switch buttons */
.palette-swatch {
    display: inline-block;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid var(--text-color);
    cursor: pointer;
    margin: 0 4px;
    transition: transform 0.2s ease;
}
.palette-swatch:hover {
    transform: scale(1.2);
}
.palette-swatch.swatch-default { background: #00FF00; }
.palette-swatch.swatch-amber { background: #ffb000; }
.palette-swatch.swatch-blue { background: #00bfff; }
.palette-swatch.swatch-pink { background: #ff66cc; }
.palette-swatch.swatch-mono { background: #cccccc; }
.palette-swatch.swatch-forest { background: #7CFC00; }

#palette-picker {
    position: fixed;
    top: 60px;
    right: 16px;
    z-index: 999;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 8px 10px;
    display: flex;
    gap: 4px;
    align-items: center;
}

/* ------------------------------------------------------------
   4. FULLSCREEN / RESPONSIVE STAGE
------------------------------------------------------------ */
#content-display.fullscreen-mode {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw !important;
    height: 100vh !important;
    max-width: none;
    z-index: 1000;
    margin: 0;
    border-radius: 0;
}

#fullscreen-toggle {
    position: fixed;
    bottom: 16px;
    right: 16px;
    z-index: 1001;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 10px 14px;
    font-family: 'Courier Prime', monospace;
    font-weight: bold;
    cursor: pointer;
    transition: transform 0.2s ease;
}
#fullscreen-toggle:hover { transform: translateY(-2px); }
#fullscreen-toggle:active { transform: translateY(1px); }

/* ------------------------------------------------------------
   5. RESPONSIVE BREAKPOINTS
   Covers phones, tablets, laptops, desktops, ultra-wide
------------------------------------------------------------ */
@media (max-width: 360px) {
    #content-display { height: 200px; }
    .red-button { width: 90px; height: 90px; font-size: 0.8rem; }
    #terminal-container { font-size: 0.8rem; }
}

@media (min-width: 361px) and (max-width: 480px) {
    #content-display { height: 250px; }
    .red-button { width: 110px; height: 110px; font-size: 1rem; }
}

@media (min-width: 481px) and (max-width: 768px) {
    #content-display { height: 350px; }
    .red-button { width: 130px; height: 130px; font-size: 1.1rem; }
}

@media (min-width: 769px) and (max-width: 1024px) {
    #content-display { height: 480px; }
}

@media (min-width: 1025px) and (max-width: 1440px) {
    #content-display { height: 600px; }
}

@media (min-width: 1441px) and (max-width: 1920px) {
    #content-display { height: 700px; max-width: 1200px; }
}

@media (min-width: 1921px) {
    #content-display { height: 900px; max-width: 1600px; }
    #terminal-container { max-width: 1100px; font-size: 1.2rem; }
}

@media (max-height: 480px) and (orientation: landscape) {
    #content-display { height: 220px; }
    #terminal-container { margin-top: 10px; }
}

/* ------------------------------------------------------------
   6. RESPONSIVE TYPOGRAPHY SCALING
------------------------------------------------------------ */
.responsive-text {
    font-size: clamp(0.85rem, 2.5vw, 2rem);
}
.responsive-heading {
    font-size: clamp(1.2rem, 5vw, 4rem);
}
.responsive-subheading {
    font-size: clamp(1rem, 3.5vw, 2.5rem);
}
.responsive-caption {
    font-size: clamp(0.7rem, 1.5vw, 1.1rem);
}

.fluid-padding {
    padding: clamp(8px, 2vw, 32px);
}
.fluid-gap {
    gap: clamp(4px, 1.5vw, 24px);
}
.fluid-margin {
    margin: clamp(8px, 2vw, 40px);
}

/* ------------------------------------------------------------
   7. LAYOUT GRIDS (Responsive container patterns)
------------------------------------------------------------ */
.responsive-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: clamp(8px, 2vw, 24px);
    width: 100%;
}

.responsive-flex {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(8px, 2vw, 24px);
    justify-content: center;
}

.stack-on-mobile {
    display: flex;
    flex-direction: row;
    gap: 16px;
}
@media (max-width: 600px) {
    .stack-on-mobile {
        flex-direction: column;
    }
}

/* ------------------------------------------------------------
   8. CONTAINER WIDTH SCALING
------------------------------------------------------------ */
.container-fluid {
    width: min(100% - 32px, 1600px);
    margin-inline: auto;
}

.container-narrow {
    width: min(100% - 32px, 700px);
    margin-inline: auto;
}

.container-wide {
    width: min(100% - 16px, 2000px);
    margin-inline: auto;
}

/* ------------------------------------------------------------
   9. PRINT / ACCESSIBILITY THEME OVERRIDES
------------------------------------------------------------ */
@media print {
    body {
        background: #fff !important;
        color: #000 !important;
    }
    .tv-static, .matrix-rain, #theme-toggle, #fullscreen-toggle, #discover-button {
        display: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}

@media (prefers-contrast: more) {
    :root {
        --text-color: #ffffff;
        --bg-color: #000000;
        --border-color: #ffffff;
    }
    body.light-theme {
        --text-color: #000000;
        --bg-color: #ffffff;
        --border-color: #000000;
    }
}

/* ------------------------------------------------------------
   10. THEME TRANSITION POLISH
------------------------------------------------------------ */
* {
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.theme-ripple {
    position: fixed;
    border-radius: 50%;
    background: var(--text-color);
    opacity: 0.15;
    transform: scale(0);
    animation: themeRipple 0.6s ease-out forwards;
    pointer-events: none;
    z-index: 9999;
}
@keyframes themeRipple {
    to {
        transform: scale(40);
        opacity: 0;
    }
}