/* =========================================================================
   1-tokens — the whole design system's vocabulary.
   Nothing in here draws anything. Every other sheet builds from these.

   One palette, one serif, one sidebar backdrop. There is nothing to
   switch: no [data-theme], no [data-font], no settings page, no
   localStorage. Every page on the site is the same width and the same
   colours. Two apps keep their own separate look and do not use this
   file: the wiki (its own standalone Wikipedia pastiche,
   fakewiki/base_wiki.html) and the device dashboards (a standalone
   full-screen instrument cluster, css/lcd.css).
   ========================================================================= */

/* Spectral (OFL). Four static cuts, not a variable font — the picker
   that justified shipping nine other families is gone, so this is the
   whole of the site's type. */
@font-face {
  font-family: "Spectral";
  src: url("../fonts/Spectral-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Spectral";
  src: url("../fonts/Spectral-Italic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Spectral";
  src: url("../fonts/Spectral-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Spectral";
  src: url("../fonts/Spectral-BoldItalic.woff2") format("woff2");
  font-weight: 700; font-style: italic; font-display: swap;
}

:root {
  /* ---- shared, theme-independent ---------------------------------------- */
  --font-mono:  ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --fs-root:  19px;
  --fs-xs:    0.75rem;
  --fs-sm:    0.875rem;
  --fs-base:  1rem;
  --fs-lg:    1.15rem;
  --fs-xl:    1.4rem;
  --fs-2xl:   1.8rem;
  --fs-3xl:   2.3rem;

  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2.5rem;

  --radius: 3px;
  /* One column width for the entire site. Wide enough for the sitemap's
     three-column table, still a sane measure for text in Spectral. */
  --content-max: 820px;
  --sidebar-width: 16rem;

  /* Semantic colours, pitched for the dark ground below. The -bg pairs
     are mixed against --bg-color rather than fixed, so they stay a tint
     of the page rather than a pastel sitting on top of it. */
  --success:      #5fc27e;
  --success-bg:   color-mix(in srgb, var(--success) 14%, var(--bg-color));
  --warning:      #e0a942;
  --warning-bg:   color-mix(in srgb, var(--warning) 14%, var(--bg-color));
  --error:        #e86b64;
  --error-bg:     color-mix(in srgb, var(--error) 14%, var(--bg-color));
  --info:         #63b3c7;
  --info-bg:      color-mix(in srgb, var(--info) 14%, var(--bg-color));
  --ind-green:  var(--success);
  --ind-yellow: var(--warning);
  --ind-blue:   #6d9ee8;
  --ind-red:    var(--error);

  /* ---- the palette ------------------------------------------------------
     Dark navy fascia, amber-cream ink, yellow accent — an instrument
     panel, which is the one visual idea the site kept. There is exactly
     one of these now: the themes below change the sidebar pattern and
     nothing else.

     Spectral throughout.

     color-scheme: dark makes the browser render its *own* widgets dark
     too — checkbox and radio bodies, select dropdowns, scrollbars, the
     caret. Without it those stay light and punch white holes in the
     page, and no CSS of ours reaches them. */
  color-scheme: dark;

  --bg-color:     #0d1526;
  --bg-card:      #141f36;
  --bg-row-alt:   #1a2742;
  --text-color:   #f0dca6;
  --text-muted:   #b09a68;
  --border-color: #26355a;
  --accent:       #ffc233;
  /* Not literally darker on a dark ground — this is the *stronger*
     accent, used as ink for headings and emphasised links, so here it
     has to be brighter than --accent, not dimmer. */
  --accent-dark:  #ffd970;
  --link-visited: #c2ad78;
  --on-accent:    #0d1526;
  --input-bg:     #111b30;

  --sidebar-bg:      #0a1020;
  --sidebar-text:    #f2d98c;
  --sidebar-text-dim: #a8925f;

  /* Background tile choices — switched by data-bg-tile on <body>. */
  --tile-waterdrops:    url("../tiles/waterdrops.png");
  --tile-arabesque:    url("../tiles/arabesque.png");
  --tile-arabesque90:  url("../tiles/arabesque90.png");
  --tile-arabesque180: url("../tiles/arabesque180.png");
  /* The active tile, overridden by body[data-bg-tile]. */
  --content-tile: var(--tile-waterdrops);
  /* Arabesque on the sidebar — faint via opacity on ::before. */
  --sidebar-tile: url("../tiles/arabesque.png");

  --font-serif: "Spectral", Georgia, "Times New Roman", serif;
  --font: var(--font-serif);
}