/* Visual themes, applied as a class on <body>: theme-a, theme-b, theme-c (js/engine.js: ?theme=a|b|c, key T cycles).
   No class = the original paper-and-ink look, untouched: every rule below is scoped to a theme class,
   except the two brand elements and the toast, which are hidden until a theme or the T key shows them.

   A · paper + brand green   Paper, engravings and the editorial feel stay. Lasting = brand green #238343,
                              depreciating = burnt sienna. Outfit for headlines, names and labels;
                              Fraunces only for sentences you read (card bodies, quotes, notes).
   B · monochrome editorial  (THE DEFAULT) Near-white page, near-black ink, brand green the only bright colour. Packaging is a
                              restrained oxblood (a grey was tried: it read as disabled text and killed the
                              punchlines). Fraunces serif for display and reading text, Outfit for labels; a short green rule marks kickers.
   C · dark stage            Keynote on a projector or Zoom. Near-black stage, warm off-white text, a brighter
                              green of the same hue, engravings inverted to light ink. Outfit throughout. */

@font-face { font-family: "Outfit"; src: url(../vendor/fonts/outfit-latin-wght-normal.woff2) format("woff2"); font-weight: 100 900; font-style: normal; font-display: block; }

/* ---------- brand elements and toast: hidden in the default look ---------- */
#chrome .brand, #chrome .brandline { display: none; }
#theme-toast { position: fixed; left: 50%; top: 12%; z-index: 1000; transform: translate(-50%, 10px); opacity: 0; pointer-events: none;
  padding: 12px 22px; border-radius: 999px; background: rgba(17, 17, 16, .88); color: #f4f1ea;
  font: 500 15px/1 "Inter", "Helvetica Neue", Arial, sans-serif; letter-spacing: .06em; transition: opacity .25s, transform .25s; }
#theme-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ======================================================================
   Tokens
   ====================================================================== */
body.theme-a {
  --paper: #f2ede2; --paper-2: #ebe4d5; --card: #f7f3ea;
  --ink: #1b2130; --ink-2: #4a5162; --ink-3: #737884; --rule: #cfc6b3;
  --problem: #238343; --problem-soft: rgba(35, 131, 67, .09);
  --patch: #ad4b24; --patch-soft: rgba(173, 75, 36, .09);
  --hatch: rgba(173, 75, 36, .085); --hatch-strong: rgba(173, 75, 36, .14);
  --gold: #9c7630; --spine: #d9cfbb; --shadow: rgba(27, 33, 48, .30);
  --display: "Outfit", "Futura", "Century Gothic", "Helvetica Neue", sans-serif;
  --sans: "Outfit", "Futura", "Helvetica Neue", Arial, sans-serif;
  --serif: "Fraunces", "Iowan Old Style", Georgia, serif;
}
body.theme-b {
  /* a pale sage grey: not white, not paper yellow; same family as the brand green */
  --paper: #eef0ec; --paper-2: #e5e8e3; --card: #f7f8f5;
  --ink: #0b0b0b; --ink-2: #363936; --ink-3: #646864; --rule: #d3d7d0;
  --problem: #238343; --problem-soft: rgba(35, 131, 67, .08);
  --patch: #8f3a2e; --patch-soft: rgba(143, 58, 46, .08);
  --hatch: rgba(143, 58, 46, .075); --hatch-strong: rgba(143, 58, 46, .12);
  --gold: #238343; --spine: #e6e6e3; --shadow: rgba(0, 0, 0, .14);
  /* the owner prefers serif: Fraunces for headlines and reading text, Outfit only for small caps labels */
  --display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --serif: "Fraunces", "Iowan Old Style", Georgia, serif;
  --sans: "Outfit", "Futura", "Helvetica Neue", Arial, sans-serif;
}
body.theme-c {
  --paper: #121211; --paper-2: #1a1a18; --card: #1c1c1a;
  --ink: #eee8dc; --ink-2: #beb8ac; --ink-3: #959086; --rule: #3a3934;
  --problem: #46b56d; --problem-soft: rgba(70, 181, 109, .12);
  --patch: #e27a55; --patch-soft: rgba(226, 122, 85, .12);
  --hatch: rgba(226, 122, 85, .13); --hatch-strong: rgba(226, 122, 85, .22);
  --gold: #d0aa5c; --spine: #2a2926; --shadow: rgba(0, 0, 0, .55);
  --display: "Outfit", "Futura", "Century Gothic", "Helvetica Neue", sans-serif;
  --sans: var(--display); --serif: var(--display);
}

/* ======================================================================
   Shared by all three themes
   ====================================================================== */
:is(body.theme-a, body.theme-b, body.theme-c) {
  --line: var(--ink);                       /* card and table borders */
  color: var(--ink); background: var(--paper);   /* reveal.css sets .reveal-viewport to black text */
}

/* running header: logo left, course line after it; brand command centred in the footer */
:is(.theme-a, .theme-b, .theme-c) #chrome .brand { display: block; position: absolute; left: 96px; top: 35px; width: 134px; height: 32px; background: var(--ink);
  -webkit-mask: url(../assets/brand/superlinear-logo.png) no-repeat left center / contain; mask: url(../assets/brand/superlinear-logo.png) no-repeat left center / contain; }
:is(.theme-a, .theme-b, .theme-c) #chrome .run.top > span:first-child { padding-left: 166px; }
:is(.theme-a, .theme-b, .theme-c) #chrome .brandline { display: block; position: absolute; left: 0; right: 0; bottom: 40px; text-align: center;
  font: 600 15px/1 var(--display); letter-spacing: .24em; text-transform: uppercase; color: var(--problem); }
:is(.theme-a, .theme-b, .theme-c) #chrome .run { font-family: var(--display); font-weight: 500; letter-spacing: .16em; }
:is(.theme-a, .theme-b, .theme-c) #chrome .progress { background: var(--problem); height: 2px; bottom: 67px; }

/* headlines and names: the geometric sans */
:is(.theme-a, .theme-b, .theme-c) .display { font-family: var(--display); font-variation-settings: normal; font-weight: 450; letter-spacing: -.018em; }
:is(.theme-a, .theme-b, .theme-c) .h1 { letter-spacing: -.028em; }
:is(.theme-a, .theme-b, .theme-c) :is(.specimen .name, .mspec .mname, .role .rname, .jrow .jname, .jrow .jn, .board .flap:not(.year), .pstage, .station, .wcard, .timeline .tn, .mbeat .bn, .scale .smark span, .numeral) {
  font-family: var(--display); font-variation-settings: normal; }
:is(.theme-a, .theme-b, .theme-c) .specimen .name { font-weight: 450; letter-spacing: -.02em; }
:is(.theme-a, .theme-b, .theme-c) :is(.mspec .mname, .role .rname) { font-weight: 480; letter-spacing: -.015em; }
:is(.theme-a, .theme-b, .theme-c) .kicker, :is(.theme-a, .theme-b, .theme-c) :is(.specimen .tag, .rcard .tag, .mspec .tag, .defcard .tag, .mcourse .tag, .jtag, .dtrap .tag, .dfix .tag) { letter-spacing: .2em; }
:is(.theme-a, .theme-b, .theme-c) .counter { font-family: var(--mono); }

/* semantic colour carried into the hatching and the few literal rgba values of deck.css */
:is(.theme-a, .theme-b, .theme-c) .specimen.split .half.r { background: repeating-linear-gradient(135deg, var(--hatch) 0 2px, transparent 2px 11px), var(--card); }
:is(.theme-a, .theme-b, .theme-c) .specimen.rev.split .half.l { background: repeating-linear-gradient(45deg, var(--hatch) 0 2px, transparent 2px 11px), var(--card); }
:is(.theme-a, .theme-b, .theme-c) :is(.mspec .mpatch, .slab, .constraint, .defcard.pack) { background: repeating-linear-gradient(135deg, var(--hatch) 0 2px, transparent 2px 11px), var(--card); }
:is(.theme-a, .theme-b, .theme-c) .window .wfill { background: repeating-linear-gradient(135deg, var(--hatch-strong) 0 2px, transparent 2px 10px); }
:is(.theme-a, .theme-b, .theme-c) .trace .hl.lit { background: var(--patch-soft); }
:is(.theme-a, .theme-b, .theme-c) .specimen .half { box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 18px 40px -24px var(--shadow); }
:is(.theme-a, .theme-b, .theme-c) .specimen.split .half.l { box-shadow: inset 6px 0 0 var(--problem), 0 18px 40px -24px var(--shadow); }
:is(.theme-a, .theme-b, .theme-c) .specimen.rev.split .half.l { box-shadow: 0 18px 40px -24px var(--shadow); }
:is(.theme-a, .theme-b, .theme-c) .specimen.rev.split .half.r { box-shadow: inset 6px 0 0 var(--problem), 0 18px 40px -24px var(--shadow); }
:is(.theme-a, .theme-b, .theme-c) .rcard { box-shadow: inset 6px 0 0 var(--problem), 0 18px 40px -26px var(--shadow); }
:is(.theme-a, .theme-b, .theme-c) .term { box-shadow: 0 18px 40px -24px var(--shadow); }
:is(.theme-a, .theme-b, .theme-c) .book { filter: drop-shadow(0 22px 26px var(--shadow)); }
:is(.theme-a, .theme-b, .theme-c) .book .spine { background: var(--spine); }
:is(.theme-a, .theme-b, .theme-c) .veil { background: linear-gradient(180deg, transparent 0%, var(--paper) 35%); }
:is(.theme-a, .theme-b, .theme-c) .numeral { color: var(--ink); opacity: .05; }

/* Outfit sets wider than Fraunces: the one headline that would wrap into the quote below it */
:is(.theme-a, .theme-c) #difficulty .display.h2 { font-size: 60px; }

/* inline SVG diagrams carry literal colours: remap them onto the theme tokens */
:is(.theme-a, .theme-b, .theme-c) [stroke="#23407a"] { stroke: var(--problem); }
:is(.theme-a, .theme-b, .theme-c) [fill="#23407a"] { fill: var(--problem); }
:is(.theme-a, .theme-b, .theme-c) [stroke="#b6422a"] { stroke: var(--patch); }
:is(.theme-a, .theme-b, .theme-c) [fill="#b6422a"] { fill: var(--patch); }
:is(.theme-a, .theme-b, .theme-c) [stroke="#1b2130"] { stroke: var(--ink); }
:is(.theme-a, .theme-b, .theme-c) [fill="#1b2130"] { fill: var(--ink); }
:is(.theme-a, .theme-b, .theme-c) [stroke="#8b8f99"] { stroke: var(--ink-3); }
:is(.theme-a, .theme-b, .theme-c) [fill="#8b8f99"] { fill: var(--ink-3); }
:is(.theme-a, .theme-b, .theme-c) [fill="#4a5162"] { fill: var(--ink-2); }
:is(.theme-a, .theme-b, .theme-c) [stroke="#cfc6b3"] { stroke: var(--rule); }
:is(.theme-a, .theme-b, .theme-c) [fill="#f2ede2"] { fill: var(--paper); }
:is(.theme-a, .theme-b, .theme-c) [fill="#f7f3ea"] { fill: var(--card); }
:is(.theme-a, .theme-b, .theme-c) [font-family="Inter"] { font-family: var(--sans); }
:is(.theme-a, .theme-b, .theme-c) [font-family="Fraunces"] { font-family: var(--serif); }

/* ======================================================================
   A · paper + brand green
   ====================================================================== */
body.theme-a .display { font-weight: 440; }
body.theme-a .specimen .taxon, body.theme-a .note, body.theme-a .qa .q { font-family: var(--serif); }

/* ======================================================================
   B · monochrome editorial
   ====================================================================== */
body.theme-b #grain { display: none; }
/* serif display as in the original deck (Fraunces, soft, optical sizing); labels and the running header stay in Outfit */
body.theme-b :is(.display, .specimen .name, .mspec .mname, .role .rname, .jrow .jname, .jrow .jn, .board .flap:not(.year), .pstage, .station, .wcard, .timeline .tn, .mbeat .bn, .scale .smark span, .numeral) {
  font-family: var(--serif); font-optical-sizing: auto; font-variation-settings: "SOFT" 30, "WONK" 0; }
body.theme-b .display { font-weight: 400; letter-spacing: -.02em; }
body.theme-b .h1 { font-weight: 400; letter-spacing: -.025em; }
body.theme-b #chrome .run, body.theme-b #chrome .brandline { font-family: var(--sans); }
body.theme-b [font-family="Fraunces"] { font-family: var(--serif); }
body.theme-b .note, body.theme-b .qa .q { border-left-color: var(--problem); }
body.theme-b .quote { border-left-color: var(--problem); }
/* engravings: neutral black ink, crisp on white */
body.theme-b :is(.plate img, .mspec .mhead img, .book img) { filter: grayscale(1) contrast(1.08) brightness(.92); }
/* cards: white, hairline black, no shadow; the lasting half keeps its green bar */
body.theme-b { --shadow: transparent; }
body.theme-b .specimen .frameline { border-color: var(--rule); }
/* section marker: a short brand-green rule before each kicker (the logo itself appears once, in the running header) */
body.theme-b .frame > .kicker::before { content: ""; position: absolute; left: -38px; top: .45em; width: 24px; height: 3px; background: var(--problem); }

/* ======================================================================
   C · dark stage
   ====================================================================== */
body.theme-c #grain { display: none; }
body.theme-c .display { font-weight: 450; }
body.theme-c :is(.note, .qa .q, .specimen .taxon, .mspec .mpatch .ptxt, .book .bsub, .italic),
body.theme-c [font-style="italic"] { font-style: normal; }
body.theme-c .note, body.theme-c .qa .q { border-left-color: var(--problem); }
body.theme-c .quote { border-left-color: var(--problem); }
/* engravings invert to warm light ink (the plates are #1a2131 ink on transparent, which inverts to #e5dece) */
body.theme-c :is(.plate img, .mspec .mhead img, .book img) { filter: invert(1) brightness(.97); }
/* cards are dark surfaces with a quiet edge; the semantic edges keep their colour */
body.theme-c { --line: #6d6a62; }
body.theme-c :is(.specimen .half.l, .specimen .half.r, .mspec .mhead, .docs i, .pstage, .station, .wcard, .term, .trace, .role, .book .cover, .book .spine) { border-color: var(--line); }
body.theme-c .specimen.split .half.l, body.theme-c .specimen.rev.split .half.r { border-color: var(--problem); }
body.theme-c .specimen.split .half.r, body.theme-c .specimen.rev.split .half.l { border-color: var(--patch); }
body.theme-c .role.boss.lit { border-color: var(--problem); }
body.theme-c .specimen .frameline { border-color: #2c2b27; }
body.theme-c .book .cover::before { border-color: #34332e; }
body.theme-c .book .cover { box-shadow: 5px 5px 0 -1px var(--paper), 5px 5px 0 0 #3a3934, 10px 10px 0 -1px var(--paper), 10px 10px 0 0 #3a3934; }