/* ==========================================================================
   Structural Engineering & Statics — tokens.
   ==========================================================================

   The structural stylesheet is essay-kit's base.css, loaded first. Everything
   below is this site's identity and nothing else.

   Light mode is drafting paper: a warm buff sheet with graphite linework, the
   surface a structural drawing was made on for most of the twentieth century.
   Dark mode is the cyanotype it was reproduced as — deep prussian blue with
   pale linework, which is a real historical pair rather than an inversion
   chosen for contrast.

   The colour roles follow the load rather than the drawing. Applied load is
   vermilion, reaction is green, the structure itself is drawing blue, moment
   is violet and anything measured is magenta. Five roles, each used for one
   thing, so a free body can be read without a legend.

   Body type is a humanist sans rather than a serif — the other sites in this
   genre are set in serifs, and a structural drawing has never been.
   ========================================================================== */

:root {
  --paper:   #f7f5ef;
  --paper-2: #efece2;
  --paper-3: #e2ddce;
  --ink:     #1b1e23;
  --ink-2:   #414750;
  --ink-3:   #5f6670;
  --rule:    #cdc6b4;
  --rule-2:  #e0dacb;

  --c-a: #1f5f8b;   /* the structure: member, chord, section outline */
  --c-b: #b23c10;   /* applied load */
  --c-c: #146b3a;   /* reaction */
  --c-d: #6b2fbd;   /* moment, and rotation */
  --c-e: #a3176e;   /* anything measured: a dimension, a deflection, a datum */
  --c-warn: #a81f16;

  --fig-ink:   var(--ink);
  --fig-soft:  #545b66;
  --fig-faint: #bdb6a4;

  --tint: 14%;
  --tint-strong: 26%;

  --font-body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  --font-display: var(--font-body);
  --font-ui: var(--font-body);
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --measure: 35rem;
  --radius: 2px;
  --shadow: 0 1px 2px rgb(27 30 35 / 8%), 0 8px 24px -14px rgb(27 30 35 / 26%);

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:   #0b1a2b;
    --paper-2: #102338;
    --paper-3: #183049;
    --ink:     #dce9f6;
    --ink-2:   #a6bdd4;
    --ink-3:   #8399b0;
    --rule:    #23405c;
    --rule-2:  #17293e;

    --c-a: #7fb8e6;
    --c-b: #f9834a;
    --c-c: #4ade80;
    --c-d: #bda0f5;
    --c-e: #f472b6;
    --c-warn: #fb7b6f;

    --fig-ink:   #d3e2f2;
    --fig-soft:  #8ea5bd;
    --fig-faint: #26415c;

    --tint: 20%;
    --tint-strong: 34%;
    --shadow: 0 1px 2px rgb(0 0 0 / 42%), 0 12px 32px -16px rgb(0 0 0 / 74%);
  }
}

:root[data-theme="dark"] {
  --paper:   #0b1a2b;
  --paper-2: #102338;
  --paper-3: #183049;
  --ink:     #dce9f6;
  --ink-2:   #a6bdd4;
  --ink-3:   #8399b0;
  --rule:    #23405c;
  --rule-2:  #17293e;

  --c-a: #7fb8e6;
  --c-b: #f9834a;
  --c-c: #4ade80;
  --c-d: #bda0f5;
  --c-e: #f472b6;
  --c-warn: #fb7b6f;

  --fig-ink:   #d3e2f2;
  --fig-soft:  #8ea5bd;
  --fig-faint: #26415c;

  --tint: 20%;
  --tint-strong: 34%;
  --shadow: 0 1px 2px rgb(0 0 0 / 42%), 0 12px 32px -16px rgb(0 0 0 / 74%);
}

/* --- site-specific roles --------------------------------------------------
   A structural figure has a small, fixed vocabulary. Every class below is a
   *role*: a generator asks for `.load` and gets whatever an applied load looks
   like in the current theme. */

/* The structure itself. */
.fig-svg .member      { stroke: var(--c-a); stroke-width: 3; fill: none; stroke-linecap: round; }
.fig-svg .member-thin { stroke: var(--c-a); stroke-width: 1.8; fill: none; }
.fig-svg .beam        { fill: color-mix(in oklab, var(--c-a) 22%, var(--paper-2)); stroke: var(--c-a); stroke-width: 1.8; }
.fig-svg .section     { fill: color-mix(in oklab, var(--c-a) 26%, var(--paper-2)); stroke: var(--c-a); stroke-width: 1.6; }
.fig-svg .ghost-shape { stroke: var(--fig-faint); stroke-width: 1.6; fill: none; stroke-dasharray: 6 4; }
.fig-svg .centreline  { stroke: var(--fig-soft); stroke-width: 1; stroke-dasharray: 8 3 2 3; }

/* Members carrying axial force, coloured by sign. Tension pulls the joints
   together on the page and compression pushes them apart, so the two need to
   be distinguishable at a glance and never by width alone. */
.fig-svg .tension     { stroke: var(--c-e); fill: none; }
.fig-svg .compression { stroke: var(--c-a); fill: none; }
.fig-svg .idle        { stroke: var(--fig-faint); fill: none; }

/* What is applied, and what pushes back. */
.fig-svg .load        { stroke: var(--c-b); fill: none; stroke-width: 2; }
.fig-svg .load-fill   { fill: color-mix(in oklab, var(--c-b) var(--tint), var(--paper-2)); stroke: var(--c-b); stroke-width: 1.4; }
.fig-svg .reaction    { stroke: var(--c-c); fill: none; stroke-width: 2.2; }
.fig-svg .moment      { stroke: var(--c-d); fill: none; stroke-width: 2; }

/* Supports and ground. */
.fig-svg .support     { fill: color-mix(in oklab, var(--c-c) 30%, var(--paper-2)); stroke: var(--fig-ink); stroke-width: 1.4; }
.fig-svg .ground      { stroke: var(--fig-ink); stroke-width: 2; }
.fig-svg .hatch       { stroke: var(--fig-faint); stroke-width: 1; }
.fig-svg .joint       { fill: var(--paper); stroke: var(--c-a); stroke-width: 1.8; }

/* Diagrams of internal force, and the deflected shape. */
.fig-svg .shear-fill  { fill: color-mix(in oklab, var(--c-c) var(--tint), var(--paper-2)); stroke: var(--c-c); stroke-width: 1.6; }
.fig-svg .moment-fill { fill: color-mix(in oklab, var(--c-d) var(--tint), var(--paper-2)); stroke: var(--c-d); stroke-width: 1.6; }
.fig-svg .stress-fill { fill: color-mix(in oklab, var(--c-b) var(--tint), var(--paper-2)); stroke: var(--c-b); stroke-width: 1.4; }
.fig-svg .deflected   { stroke: var(--c-e); stroke-width: 2.4; fill: none; }

/* Dimensions and annotation. */
.fig-svg .dim         { stroke: var(--c-e); stroke-width: 1.1; }
.fig-svg .datum       { fill: var(--c-e); stroke: none; }

/* A ruled hairline under section headings — a drawing sheet's border. */
.section-head::after { border-top-style: solid; }