/* ========================================================================
   THEME.CSS — Entangled At A Distance
   Site-specific STRUCTURAL extras only. Color VALUES live in config.php
   (THEME_* constants) and are emitted as :root vars by theme-vars.php.

   FRAMEWORK CSS DOCTRINE:
     1. config.php          → THEME_* color constants (per-site values)
     2. theme-vars.php      → emits constants as :root CSS vars (shared partial)
     3. universal.css       → framework rules using var() (identical across all sites)
     4. theme.css (THIS)    → site-specific structural extras only
                              (NEVER colors — those live in config.php)

   What this file owns for EAD:
     - Body baseline assertion (font + min-height + overflow)
     - CSS-only starfield background
     - Scrollbar styling using brass tones
     - EAD-specific button-contrast override (brass primary needs dark text)
   ======================================================================== */

/* === FONT FAMILY ASSERTION ============================================= */
/* EAD uses Space Grotesk + Caveat (loaded via Google Fonts in index.php).
   universal.css doesn't dictate fonts; this is a site call. */

body {
    font-family: 'Space Grotesk', system-ui, -apple-system, sans-serif;
    line-height: 1.6;
    min-height: 100vh;
    overflow-x: hidden;
}

/* Form controls get their own face, distinct from the Space Grotesk
   display body. A system-UI stack is the most legible for entering and
   editing text and adds zero font-loading cost. universal.css already
   makes controls inherit; this gives them a deliberate, readable typeface.
   Styled .button keeps --font-heading (class beats element specificity). */
input, select, textarea {
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* === SCRIPT TEXT SIZE =================================================
   ONLY the scene script is enlarged, and only where the script itself is
   shown: the rendered script (.ads-render, the parsed-scene view) and the
   script editing box (the storyScene scriptBody textarea). Nothing else,
   no global <p>, headings, inputs, selects, menus, or other textareas,
   all of those stay framework size. The script box also opens to its
   content so it need not be dragged open (field-sizing is Chromium 123+;
   elsewhere it simply starts at min-height). */
.ads-render { font-size: 1.5rem; }

textarea[name$="[scriptBody]"] {
    font-size: 1.5rem;
    field-sizing: content;
    min-height: 16rem;
    max-height: 70vh;
}

/* === STARFIELD BACKGROUND ==============================================
   The `<div class="starfield-mid">` element exists in index.php. Pure-CSS
   layered radial-gradient stars — no canvas, no JS. Subtle brass tints
   scattered through white pinpricks for the brass/space mood. */

.starfield-mid {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.7;
    background-image:
        radial-gradient(1px 1px at 12% 18%, rgba(255, 255, 255, 0.7), transparent 50%),
        radial-gradient(1px 1px at 28% 72%, rgba(255, 255, 255, 0.5), transparent 50%),
        radial-gradient(1px 1px at 47% 41%, rgba(255, 255, 255, 0.6), transparent 50%),
        radial-gradient(1px 1px at 62% 88%, rgba(255, 255, 255, 0.5), transparent 50%),
        radial-gradient(1px 1px at 78% 22%, rgba(255, 255, 255, 0.6), transparent 50%),
        radial-gradient(1px 1px at 91% 56%, rgba(255, 255, 255, 0.5), transparent 50%),
        radial-gradient(2px 2px at 35% 50%, var(--primary-transparent), transparent 50%),
        radial-gradient(2px 2px at 82% 78%, var(--primary-transparent), transparent 50%),
        radial-gradient(1px 1px at 8%  62%, rgba(255, 255, 255, 0.5), transparent 50%),
        radial-gradient(1px 1px at 55% 12%, rgba(255, 255, 255, 0.6), transparent 50%),
        radial-gradient(1px 1px at 22% 38%, rgba(255, 255, 255, 0.5), transparent 50%),
        radial-gradient(1px 1px at 70% 65%, rgba(255, 255, 255, 0.6), transparent 50%);
    background-repeat: repeat;
    background-size: 100vw 100vh;
}

/* Keep page content above the starfield */
#outerFrame {
    position: relative;
    z-index: 1;
}

/* === SCROLLBAR (subtle brass mood) ====================================== */

* {
    scrollbar-width: thin;
    scrollbar-color: var(--border-light) transparent;
}

*::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

*::-webkit-scrollbar-track {
    background: transparent;
}

*::-webkit-scrollbar-thumb {
    background: var(--border-light);
    border-radius: 4px;
}

*::-webkit-scrollbar-thumb:hover {
    background: var(--primary-dark);
}

/* === BUTTON-CONTRAST OVERRIDES (EAD-specific) ==========================
   universal.css's default rule sets `.button.primary { color: var(--text-on-dark); }`
   That works for sites whose primary is DARK (FG/FC/TSO). EAD's primary is
   BRASS — light enough that light text would be unreadable. Override with
   the on-light text token for proper contrast. */

.button.primary,
button.primary,
input[type="submit"].primary,
input[type="button"].primary {
    color: var(--text-on-light);
}

.button.primary:hover,
button.primary:hover {
    color: var(--text-on-light);
    box-shadow: 0 0 20px var(--focus-ring);
}