/* =====================================================================
   3D USER — theme.css
   =====================================================================

   THE single source of truth for colour, shape and type on this site.

   Before this file existed, the same eleven-variable :root block was
   copy-pasted into forum.html, news.html and admin.html, and the copies
   had already drifted apart from each other. Worse, plenty of colours
   were never variables at all — #3a2c1c alone was written out twenty
   times by hand — which is exactly why the old Midnight theme needed an
   !important on the body background to force its way past them.

   Nothing on this site should hardcode a colour any more. If you find
   yourself typing a # into a page, the colour belongs in here instead.

   ---------------------------------------------------------------------
   HOW IT LOADS

   This site has no express.static, so theme.css is served by its own
   route in server.js, exactly like shared-nav.js. Every page pulls it
   in with one line in the <head>, BEFORE that page's own <style> block:

       <link rel="stylesheet" href="/theme.css">

   ---------------------------------------------------------------------
   HOW IT WILL LAYER (the plumbing is here, the layers come later)

   Themes are meant to stack, most general first, so a later layer only
   has to say what it changes:

       1. this file            the site's defaults, always present
       2. the site theme       what the theme admin page publishes
       3. a world's theme      a world owner colouring their own pages
       4. a person's theme     someone tuning it for their own eyes

   Only layer 1 exists today. Each later layer is just another :root
   block written after this one, so none of them needs new machinery —
   which is why it is worth keeping every value below a variable even
   where a fixed colour would have done.
   ===================================================================== */

:root {

  /* ---- Ground -------------------------------------------------------
     Warm basalt rather than neutral black. Everything on this site sits
     on stone, and stone with a little brown in it reads as carved
     rather than printed. */
     These are your existing values, to the digit. This first pass moves
     colours into one place WITHOUT changing any of them, so the site
     should look pixel-for-pixel identical afterwards — which is the
     whole point: if anything looks different, something broke. Retuning
     comes later, with the sliders, where you can see it happen. */
  --void:        #17130f;   /* the page behind everything */
  --void-deep:   #0e0b08;   /* the darkest corner of the page gradient */
  --glow-top:    #2a2118;   /* the warm lift at the top of the page */
  --stone:       #211a13;   /* panels, cards, forms sitting on the page */
  --stone-lit:   #241b13;   /* a panel catching a little light */
  --stone-cut:   #3a2c1c;   /* every border and divider on the site */
  --field-bg:    #1a130d;   /* inside a text box or a select */

  /* ---- Light --------------------------------------------------------
     Gold is the site's voice and does almost all the work. Aether is
     the gateway ring's colour and is spent sparingly indoors — focus
     rings, live indicators, things that are genuinely interactive.
     Flare is reserved for one moment only: a gate opening. */
  --sigil:       #e0bb4a;   /* bright gold — headings, active states */
  --sigil-deep:  #c9a227;   /* gold — borders, buttons, links */
  --aether:      #4fd8f5;   /* the ring's light. use it rarely. */
  --flare:       #b06cff;   /* transit only. do not spend elsewhere. */

  /* ---- Text ---------------------------------------------------------
     Four steps, and they are a ladder: use the next one down rather
     than reaching for an opacity. */
  --text:        #f2e9d4;   /* body text and anything that must be read */
  --text-soft:   #ecdfc0;   /* long-form reading, posts, articles */
  --muted:       #d8c9a3;   /* supporting text, labels, blurbs */
  --dim:         #8b6b3d;   /* metadata, timestamps, counts */

  /* ---- State --------------------------------------------------------
     Kept separate from the accent on purpose. "This went well" must not
     change meaning because somebody retuned the brand colour. */
  --live:        #6fae6f;   /* online, running, won */
  --warn:        #e0bb4a;   /* needs attention, building, drawn */
  --down:        #b56a5a;   /* offline, failed, lost */
  --mod:         #d99a8c;   /* moderator-only controls */
  --error-text:  #e8a99b;   /* "that didn't work" text under a form */

  /* ---- Odds and ends that were hardcoded on one page each ------------
     Small, but every one of them was a colour a slider could not reach,
     so they are tokens now like everything else. */
  --tint-faint:  rgba(255,255,255,0.02);  /* the barely-there lift on a resting pill */
  --photo-mat:   #000000;   /* behind a photo while it is being positioned */
  --crop-marker: #d9453a;   /* the crop box on the news focal-point picker.
                               Deliberately NOT --down: this is a measuring
                               tool, not a failure, and it needs to stay
                               visible against any photo. */

  /* ---- Composed backgrounds -----------------------------------------
     These are whole gradients held as tokens, not just colours. That is
     the specific thing the old Midnight theme could not do: the page
     gradient had warm tones written into it directly, so a theme could
     only beat it with !important. Now a theme just reassigns it. */
  --page-bg:  radial-gradient(ellipse at 50% -10%,
                var(--glow-top) 0%, var(--void) 55%, var(--void-deep) 100%);
  --nav-bg:    linear-gradient(180deg, #1c1610, #120d09);
  --card-bg:   linear-gradient(160deg, var(--stone-lit), var(--field-bg));
  --panel-bg:  var(--stone);
  --prompt-bg: linear-gradient(160deg, #2a2015, #1c1610);  /* the "sign in to join in" strip */

  /* ---- Shape and motion --------------------------------------------- */
  --radius:      10px;      /* cards and panels */
  --radius-sm:   6px;       /* inputs and small buttons */
  --pill:        999px;     /* pills, pagers, round buttons */
  --speed:       0.15s;     /* the site's one transition duration */
  --glow:        1;         /* multiplier on every glow. 0 = none. */

  /* ---- Type ---------------------------------------------------------
     Cinzel is Roman inscriptional capitals — literally carved letters,
     which is why it has always suited this site. Cormorant reads long
     text; Inter carries the interface; Arial handles small data. */
  --font-display: 'Cinzel', Georgia, serif;
  --font-body:    'Cormorant Garamond', Georgia, serif;
  --font-ui:      'Inter', Arial, sans-serif;
  --font-data:    Arial, Helvetica, sans-serif;

  /* ---- The accent in play -------------------------------------------
     The forum reassigns this live to whichever subforum is open, so the
     chrome — focus rings, hover glow, the submit button — shifts with
     the section you are standing in. Left as gold by default.

     Note the pills themselves set --accent inline per pill, scoped to
     that element. Deliberately NOT declared here, so those pills keep
     falling back exactly as they did before. */
  --current-accent:        var(--sigil-deep);
  --current-accent-bright: var(--sigil);

  /* ---- One value that is not yet tunable ----------------------------
     The chevron inside a <select> is a background image, and a data URI
     cannot read a CSS variable, so its gold is written into the URL.
     Keeping the whole thing here means it is at least in ONE place —
     but be aware this one will NOT move when the theme sliders do.
     Fixing it properly means swapping the image for a mask, which is a
     job for the day someone changes the accent away from gold. */
  --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23c9a227' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  /* ===================================================================
     COMPATIBILITY ALIASES

     The old names. Every page that has not been converted yet still
     uses these, and they keep working because they now point at the
     tokens above instead of carrying their own values.

     This is what makes the migration safe to do one page at a time: an
     untouched page cannot break, because nothing it asks for has gone
     away. As each page is converted to the names above, delete nothing
     here — other pages are still using them. This block goes away in
     one go, at the end, once no page references any of it.
     =================================================================== */
  --bg-deep:       var(--void);
  --bg-panel:      var(--stone);
  --bronze:        var(--dim);
  --gold:          var(--sigil-deep);
  --gold-bright:   var(--sigil);
  --parchment:     var(--text-soft);
  --parchment-dim: var(--muted);
  --walnut-dark:   #3c2a1c;
  --walnut-darker: #2a1d13;
  --ivory:         var(--text);
  --ink:           #171008;
  --win:           var(--live);
  --loss:          var(--down);
}

/* =====================================================================
   THE PAGE ITSELF
   Every page repeated these same three rules in its own <style>. They
   live here now, so a page's block only has to describe what makes that
   page different.
   ===================================================================== */
* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--page-bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 18px;
}

h1, h2, h3 {
  font-family: var(--font-display);
  letter-spacing: 0.03em;
}

/* Anyone who has asked their computer to stop moving things gets that
   respected site-wide, rather than page by page. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}
