/* ==========================================================================
   SEERIEQUERIES V3 // GLOBAL FOUNDATION
   ==========================================================================
   CORE IDEA:
   SeerieQueries is a living personal codex: part archive, part grimoire,
   part workshop, part record of whatever refuses to leave my brain.

   VISUAL DIRECTION:
   - Eldritch without becoming unreadable horror.
   - Mystical rather than gothic.
   - Deep navy / bruised violet foundations.
   - Spectral blue, ritual gold, omen rose, and ghost-mint accents.
   - Individual pages and creations may override this shared palette.

   LOAD ORDER:
   1. style.css
   2. palettes.css
   3. components.css
   4. sidebar.css
   5. page-specific stylesheet
   ========================================================================== */


/* ==========================================================================
   01. CORE SITE PALETTE
   ==========================================================================
   This is the DEFAULT "Seerie" palette.

   Inspiration:
   ===> The Web
   ===> The Dark
   ===> Oath of the Drowned
   ===> Dreamscape
   ===> small amounts of Stigmata / ritual gold

   Keep these semantic variables stable. Page styles should override the
   semantic variable, not hunt through the entire site for raw hex values.
   ========================================================================== */

:root {

    /* ==================== ABYSS / SURFACES ==================== */

    --seer-abyss: #070812;
    --seer-void: #0b0d19;
    --seer-ink: #101526;
    --seer-panel: #15182c;
    --seer-panel-soft: #191a31;
    --seer-card: #111321;


    /* ==================== TEXT ==================== */

    --seer-bone: #ebe7df;
    --seer-moon: #d7d4e4;
    --seer-muted: #8b88a0;
    --seer-faint: #5f6077;


    /* ==================== MAIN ACCENTS ==================== */

    --seer-oracle: #a99ae2;
    --seer-oracle-bright: #c5b6ff;

    --seer-spectral: #82b9d8;
    --seer-spectral-bright: #9bdcef;

    --seer-relic: #dfbd69;
    --seer-omen: #c85478;
    --seer-ghost: #9ed8c2;
    --seer-moss: #769d68;


    /* ==================== BORDER / LINE WORK ==================== */

    --seer-line: #34324c;
    --seer-line-soft: rgba(169, 154, 226, 0.18);
    --seer-line-bright: rgba(155, 220, 239, 0.34);


    /* ======================================================================
       BACKWARD-COMPATIBILITY ALIASES
       ======================================================================
       Older page modules still reference these names.
       Keeping them mapped means the visual overhaul does NOT require us to
       rewrite every surviving component on day one.
       ====================================================================== */

    --bg-cosmic: var(--seer-abyss);
    --bg-container: var(--seer-panel);
    --bg-card: var(--seer-card);

    --text-primary: var(--seer-moon);
    --text-muted: var(--seer-muted);

    --border-cosmic: var(--seer-line);

    --accent-glow: var(--seer-oracle-bright);
    --cyan-glow: var(--seer-spectral-bright);

    --bg-headspace: #0b171d;
    --border-headspace: #294653;

    /* Legacy sidebar names now point at the new eldritch system. */
    --bg-gold-sidebar: #141326;
    --text-gold-dark: var(--seer-bone);
    --border-gold-etched: rgba(223, 189, 105, 0.34);
}


/* ==========================================================================
   02. DOCUMENT FOUNDATION
   ========================================================================== */

html {
    scroll-behavior: smooth;
}


body {
    margin: 0;
    padding: 0;

    min-height: 100vh;

    font-family:
        'Courier New',
        Courier,
        monospace;

    color: var(--text-primary);

    /*
       Several low-opacity radial fields give the site depth without requiring
       a background image. Think: distant aurora, stained astral glass, and
       something looking back from very far away.
    */
    background:
        radial-gradient(
            circle at 16% 8%,
            rgba(84, 64, 132, 0.18),
            transparent 28%
        ),
        radial-gradient(
            circle at 88% 16%,
            rgba(38, 90, 112, 0.13),
            transparent 24%
        ),
        radial-gradient(
            circle at 65% 88%,
            rgba(110, 39, 72, 0.08),
            transparent 30%
        ),
        linear-gradient(
            160deg,
            #070812 0%,
            #090a16 36%,
            #0b0d19 68%,
            #080711 100%
        );

    background-attachment: fixed;

    /*
       Preserve the existing custom-cursor behavior.
       If the remote cursor ever stops resolving, the browser falls back to auto.
    */
    cursor:
        url('https://cursors-4u.net'),
        url('https://cursors-4u.net'),
        auto;
}


/* ==================== TEXT SELECTION ==================== */

::selection {
    color: #ffffff;
    background-color: rgba(122, 85, 174, 0.72);
}


/* ==========================================================================
   03. MASTER SITE LAYOUT
   ========================================================================== */

.site-container {
    display: flex;

    min-height: 100vh;
}


.main-content {
    flex: 1;

    width: 100%;
    max-width: 1400px;

    padding: 40px;

    box-sizing: border-box;
}


/* ==========================================================================
   04. SHARED LINK FOUNDATION
   ========================================================================== */

a {
    color: var(--seer-spectral-bright);
}


a:hover {
    color: #ffffff;
}


/* ==========================================================================
   05. THEME HOOK
   ==========================================================================
   The updated HTML files use .site-theme-seerie on <body>.
   This gives us one global hook for future atmosphere without touching every
   page file.
   ========================================================================== */

.site-theme-seerie {
    --page-accent: var(--seer-oracle);
    --page-accent-2: var(--seer-spectral);
    --page-relic: var(--seer-relic);
}


/* ==========================================================================
   06. REDUCED MOTION SUPPORT
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }

    .marquee-text {
        animation: none;
        padding-left: 0;
    }

}


/* ==========================================================================
   07. MASTER RESPONSIVE LAYOUT
   ========================================================================== */

@media (max-width: 850px) {

    .site-container {
        flex-direction: column;
    }


    .main-content {
        padding: 20px;
    }

}