/*
 * Palettes. Everything else in the stylesheet reads these custom properties,
 * so adding a fourth scheme is one more block here plus an entry in THEMES
 * in app.js.
 *
 *   --bg        page background
 *   --panel     panel background (sits just above --bg)
 *   --fg        body text
 *   --dim       secondary text, placeholders, disabled chrome
 *   --rule      borders and separators
 *   --accent    headings, section titles, the search caret
 *   --accent2   focus rings, hover, the "live" accents
 *   --glow      text-shadow applied to headings and hovered links
 *   --danger    destructive controls and validation errors
 *   --scan      opacity of the scanline overlay
 */

:root,
[data-theme="green"] {
    --bg:      #060a06;
    --panel:   #0a1109;
    --fg:      #33ff66;
    --dim:     #1f8a3c;
    --rule:    #17512a;
    --accent:  #8dffb4;
    --accent2: #33ff66;
    --glow:    0 0 7px rgba(51, 255, 102, 0.40);
    --danger:  #ff5f5f;
    --scan:    0.05;
    --select:  rgba(51, 255, 102, 0.25);
}

[data-theme="amber"] {
    --bg:      #0b0803;
    --panel:   #130d04;
    --fg:      #ffb000;
    --dim:     #9c6a0c;
    --rule:    #573a06;
    --accent:  #ffd684;
    --accent2: #ffb000;
    --glow:    0 0 7px rgba(255, 176, 0, 0.38);
    --danger:  #ff6b4a;
    --scan:    0.05;
    --select:  rgba(255, 176, 0, 0.25);
}

[data-theme="cyber"] {
    --bg:      #070a18;
    --panel:   #0c1026;
    --fg:      #9fdcf5;
    --dim:     #4a6a91;
    --rule:    #23305c;
    --accent:  #ff2fb9;
    --accent2: #00e5ff;
    --glow:    0 0 9px rgba(0, 229, 255, 0.45);
    --danger:  #ff4d6d;
    --scan:    0.045;
    --select:  rgba(255, 47, 185, 0.30);
}

/*
 * Vaporwave: purple ground rather than cyber's navy, and the classic
 * pink / mint / cyan trio. Pink leads, mint is the live accent -- the inverse
 * emphasis to cyber, which keeps the two from reading as the same theme.
 */
[data-theme="vaporwave"] {
    --bg:      #1a0b2e;
    /* Translucent, unlike the other themes: the backdrop below has to read
       through the panels or it survives only as slivers between them. */
    --panel:   rgba(28, 11, 50, 0.86);
    --fg:      #f2c4ff;
    --dim:     #9a6a9e;
    --rule:    #5a2a72;
    --accent:  #ff9245;   /* sunset orange -- headings and section titles */
    --accent2: #05ffa1;   /* mint -- focus rings, live accents */
    --glow:    0 0 8px rgba(255, 146, 69, 0.38);
    --danger:  #ff5f7e;
    --scan:    0.06;
    --select:  rgba(255, 113, 206, 0.28);
}

/*
 * The palette runs orange -> pink -> mint, so the middle colour needs somewhere
 * to live: group subheadings take the pink that section titles gave up.
 */
[data-theme="vaporwave"] .group-title { color: #ff71ce; }
[data-theme="vaporwave"] .wx-cond     { color: #ff71ce; }
[data-theme="vaporwave"] .search-caret,
[data-theme="vaporwave"] .wx-degrees  { color: #ff9245; }

/* Cyberpunk gets a second colour to play with: magenta headings, cyan links. */
[data-theme="cyber"] .panel-title,
[data-theme="cyber"] .engines-title,
[data-theme="cyber"] .group-title {
    text-shadow: 0 0 9px rgba(255, 47, 185, 0.5);
}

[data-theme="cyber"] .link:hover,
[data-theme="cyber"] .link:focus-visible {
    color: var(--accent2);
}

/* Pink-on-pink hover would be muddy, so vaporwave links go mint. */
[data-theme="vaporwave"] .link:hover,
[data-theme="vaporwave"] .link:focus-visible {
    color: var(--accent2);
}

/*
 * Vaporwave backdrop: sunset sky, horizon grid, palms. Self-contained --
 * delete this block and the theme falls back to flat colour.
 *
 * Rendered live by api/scene.php from the clock and the cached weather, so the
 * sky, the sun/moon arc and the stars follow the actual time of day. The URL
 * is relative to this stylesheet, not to the page.
 *
 * preserveAspectRatio=slice gives it cover semantics anchored to the bottom,
 * and the top of the sky is flat so a cropped top leaves no seam.
 *
 * Panels, the search bar, the weather card and the notepad all paint opaque
 * var(--panel), so the scene shows only through the gutters.
 */
[data-theme="vaporwave"] body {
    background-color: var(--bg);
    /* --scene is the single channel for anyone replacing the backdrop: the
       refresher on tab focus, and the DEV simulator. Unset, this fallback is
       the live scene, which is what a plain page load wants. */
    background-image: var(--scene, url("../../api/scene.php"));
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: 100% 100%;
    background-attachment: fixed;
}

/*
 * With translucent panels the title chips can't stay flat --bg: they would
 * read as solid blocks punched out of the scene. Match the panel instead, and
 * keep the notepad a little more opaque since it holds the most text.
 */
[data-theme="vaporwave"] .panel-title,
[data-theme="vaporwave"] .engines-title {
    background: rgba(26, 11, 46, 0.88);
}

[data-theme="vaporwave"] .np-text,
[data-theme="vaporwave"] .search {
    background: rgba(26, 11, 46, 0.86);
}

[data-theme="vaporwave"] .statusbar {
    background: rgba(20, 8, 36, 0.92);
    backdrop-filter: blur(2px);
}