/* WelcomeTo Studios - design tokens and type faces, shared by every page.

   Cinematic dark: warm near-black surfaces, a modern display serif
   (Fraunces) for headlines over a clean sans (Inter) for everything you
   read, and one crimson accent used sparingly. Every text colour here is
   checked against every surface it sits on: body text is 13:1 or better,
   muted text 7.5:1, the faintest text 4.9:1 (WCAG AA wants 4.5:1), and
   white on the accent button 6.5:1.

   The faces are self-hosted (SIL Open Font License - see fonts/LICENSE-*),
   so no page makes a third-party request. */

@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(../fonts/fraunces.woff2?v=7234ed86) format('woff2'); }
@font-face { font-family: 'Fraunces'; font-style: italic; font-weight: 100 900; font-display: swap; src: url(../fonts/fraunces-italic.woff2?v=066710ce) format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(../fonts/inter.woff2?v=2c295d99) format('woff2'); }
@font-face { font-family: 'Inter'; font-style: italic; font-weight: 100 900; font-display: swap; src: url(../fonts/inter-italic.woff2?v=c58f9d53) format('woff2'); }

/* Until the faces arrive (font-display: swap), text is set in a font the
   device already has, sized to take the same room: Arial (or Helvetica,
   Roboto, Liberation Sans - all set English within a percent of each
   other) and Times New Roman (or Liberation Serif, Tinos), each scaled to
   the width of Inter or Fraunces, with the face's own ascent and descent.
   So a paragraph wraps at the same words before and after, and the page
   does not jump when the faces swap in. The widths were measured on the
   site's own copy at its own sizes; the ascents and descents are the
   faces' (Inter 1984/494 of 2048, Fraunces 1956/510 of 2000), over the
   scale. */
@font-face { font-family: 'Inter fallback'; src: local('Arial'), local('ArialMT'), local('Helvetica'), local('Roboto'), local('Liberation Sans'), local('Arimo'); size-adjust: 106.5%; ascent-override: 90.96%; descent-override: 22.65%; line-gap-override: 0%; }
@font-face { font-family: 'Fraunces fallback'; src: local('Times New Roman'), local('TimesNewRomanPSMT'), local('Liberation Serif'), local('Tinos'); size-adjust: 106%; ascent-override: 92.26%; descent-override: 24.06%; line-gap-override: 0%; }

:root {
  color-scheme: dark;

  /* surfaces, darkest to lightest */
  --bg: #0c0a0b;
  --surface: #161214;
  --surface-2: #1f1a1d;
  --raised: #29232a;
  --overlay: rgba(6, 4, 5, .72);

  /* lines */
  --line: rgba(255, 238, 230, .08);
  --line-strong: rgba(255, 238, 230, .16);

  /* text */
  --text: #f4efeb;
  --text-muted: #bdb3ad;
  --text-faint: #9a908a;

  /* the accent, and what sits on it */
  --accent: #b5232c;          /* buttons, active markers - white text 6.5:1 */
  --accent-hover: #c22a33;
  --accent-text: #ff7a72;     /* accent-coloured text and links on dark */
  --accent-wash: rgba(181, 35, 44, .14);
  --blood: #cc1f2a;           /* blood red, for accents that need to read as blood */
  --on-accent: #ffffff;
  /* Every rim that marks something selected, switched on or focused - a
     chosen card or chip, a text box being typed in, the keyboard's ring -
     is the studio bot's own embed red, #750000, the colour its Discord
     cards use, with a glow of the same deep red round it so the dark edge
     still reads on the near-black surfaces. --accent-text stays for words. */
  --rim: #750000;
  --rim-glow: 0 0 0 1px #750000, 0 0 14px 2px rgba(140, 0, 0, .75);
  /* The same rim drawn inside the edge, for what fills a scrolling box
     edge to edge (a menu's option, a message row), where one outside it
     would be cut off at the box's sides. */
  --rim-inset: inset 0 0 0 1px #750000, inset 0 0 12px 1px rgba(140, 0, 0, .6);
  --selected: var(--rim);
  --selected-wash: rgba(117, 0, 0, .22);
  --selected-glow: 0 0 0 1px #750000, 0 0 22px 3px rgba(140, 0, 0, .72);
  --selected-glow-sm: 0 0 0 1px #750000, 0 0 12px 2px rgba(140, 0, 0, .72);

  /* status */
  --gold: #e7bf6a;            /* private, warnings */
  --gold-wash: rgba(231, 191, 106, .12);
  --green: #5dd39e;
  --green-wash: rgba(93, 211, 158, .12);
  --danger: #ff7a72;
  --danger-wash: rgba(255, 122, 114, .12);
  --link: #ecd9d5;            /* citation marks and small references: a warm near-white, not a tint */
  --wiki-link: #f2555e;       /* a link to a wiki page: deep crimson, 5.5:1 */
  --wiki-link-archive: #a77bf2; /* a link to an archive: deep violet, 6:1 */

  /* type */
  --font-display: 'Fraunces', 'Fraunces fallback', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --font-body: 'Inter', 'Inter fallback', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, Consolas, monospace;

  /* shape */
  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-pill: 999px;
  --shadow-card: 0 1px 0 rgba(255, 255, 255, .03) inset, 0 10px 30px -12px rgba(0, 0, 0, .6);
  --shadow-pop: 0 24px 64px -16px rgba(0, 0, 0, .75), 0 0 0 1px var(--line);
  /* The keyboard's ring is the rim itself - var(--rim-glow) as the focused
     control's box-shadow, hugging its edge - and only that: one rim. The
     focus rules also draw an outline in this colour, which is transparent,
     so it shows nothing beside the rim; it is there for Windows' high
     contrast mode, which drops every box-shadow (and with it the rim) and
     paints this outline in the system's own colour instead (below). A
     visible outline as well as the rim was the double rim: a ring, a dark
     gap, and a second ring outside it. */
  --focus: transparent;

  /* layout */
  --page: 1200px;
  --gutter: clamp(16px, 4vw, 32px);
  --ease: cubic-bezier(.2, .7, .2, 1);
}

/* High contrast (forced colours): no shadows, so no rim; the focus rules'
   outline is the ring there, in the system's colour for text. */
@media (forced-colors: active) {
  :root { --focus: CanvasText; }
}