/* ==========================================================================
   Textile Structure — 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 unbleached linen — the colour of undyed cloth before anything
   is done to it. Dark mode is the inside of a dye vat rather than a generic
   night theme.

   The two principal roles are not chosen freely. **Warp is indigo and weft is
   madder**, which are the two oldest dyes in the trade and the convention every
   weaving draft has used since point paper existed: the warp is the thread that
   is dressed on the loom and dyed in the hank, and in denim it is literally
   indigo while the weft is literally left pale. A reader who learns that a blue
   line is a warp end here reads every other draft the same way.

   The squared grid is not decoration either. A weave *is* a grid of filled and
   empty squares, so point paper is the substrate of the subject rather than a
   background for it.
   ========================================================================== */

:root {
  --paper:   #faf7f0;
  --paper-2: #f3eee3;
  --paper-3: #e7e0d0;
  --ink:     #221e16;
  --ink-2:   #4d4636;
  --ink-3:   #635b48;
  --rule:    #d9d1bf;
  --rule-2:  #ebe5d8;
  --rule-3:  #ebe5d8;

  /* Semantic roles, and they are the threads themselves. */
  --c-a: #24406e;   /* the warp — indigo, the dressed thread */
  --c-b: #a5391f;   /* the weft — madder, the thread that is thrown */
  --c-c: #2c6152;   /* a float: the stretch where a thread stays on the face */
  --c-d: #7d6415;   /* a measured or counted quantity */
  --c-e: #6b4a86;   /* structure: the point paper, the repeat, the trellis */
  --c-warn: #a3231a;

  --fig-ink:   var(--ink);
  --fig-soft:  #6d6552;
  --fig-faint: #cfc6b1;

  --warp:     #24406e;
  --weft:     #a5391f;
  --grid-ink: #b9ae95;

  --tint: 13%;
  --tint-strong: 24%;

  --font-body: Georgia, "Nimbus Roman", "Liberation Serif", "Times New Roman", serif;
  --font-display: var(--font-body);
  --font-ui: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --measure: 34rem;
  --radius: 3px;
  --shadow: 0 1px 2px rgb(34 30 22 / 8%), 0 8px 24px -14px rgb(34 30 22 / 28%);

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:   #14161c;
    --paper-2: #1b1e27;
    --paper-3: #252935;
    --ink:     #ece9e0;
    --ink-2:   #c0bbaa;
    --ink-3:   #a9a392;
    --rule:    #333747;
    --rule-2:  #22252f;
    --rule-3:  #22252f;

    --c-a: #86a8e8;
    --c-b: #ff9a7c;
    --c-c: #63cbaf;
    --c-d: #e8c569;
    --c-e: #c39bea;
    --c-warn: #fb7b6f;

    --fig-ink:   #e9e6dd;
    --fig-soft:  #9d9784;
    --fig-faint: #3a3d4c;

    --warp:     #86a8e8;
    --weft:     #ff9a7c;
    --grid-ink: #454a5c;

    --tint: 19%;
    --tint-strong: 32%;
    --shadow: 0 1px 2px rgb(0 0 0 / 46%), 0 12px 34px -16px rgb(0 0 0 / 78%);
  }
}

:root[data-theme="dark"] {
  --paper:   #14161c;
  --paper-2: #1b1e27;
  --paper-3: #252935;
  --ink:     #ece9e0;
  --ink-2:   #c0bbaa;
  --ink-3:   #a9a392;
  --rule:    #333747;
  --rule-2:  #22252f;
  --rule-3:  #22252f;

  --c-a: #86a8e8;
  --c-b: #ff9a7c;
  --c-c: #63cbaf;
  --c-d: #e8c569;
  --c-e: #c39bea;
  --c-warn: #fb7b6f;

  --fig-ink:   #e9e6dd;
  --fig-soft:  #9d9784;
  --fig-faint: #3a3d4c;

  --warp:     #86a8e8;
  --weft:     #ff9a7c;
  --grid-ink: #454a5c;

  --tint: 19%;
  --tint-strong: 32%;
  --shadow: 0 1px 2px rgb(0 0 0 / 46%), 0 12px 34px -16px rgb(0 0 0 / 78%);
}

/* --- site-specific roles -------------------------------------------------- */

/* Point paper: the squared grid a draft is written on. It is drawn faintly
   because it is the paper, not the cloth. */
.fig-svg .point-paper { stroke: var(--grid-ink); stroke-width: 0.8; fill: none; }
.fig-svg .repeat      { stroke: var(--c-e); stroke-width: 1.8; fill: none; }
.fig-svg .repeat-fill { fill: color-mix(in oklab, var(--c-e) 6%, var(--paper-2)); stroke: none; }

/* A draft cell. Filled means the warp is on the face; empty means the weft is.
   That convention is universal and a site that inverted it would be unreadable
   against every other source. */
.fig-svg .warp-up { fill: color-mix(in oklab, var(--c-a) 74%, var(--paper)); stroke: none; }
.fig-svg .weft-up { fill: color-mix(in oklab, var(--c-b) 16%, var(--paper-2)); stroke: none; }

/* Threads drawn as threads, in section or in plan. */
.fig-svg .warp      { stroke: var(--warp); stroke-width: 2.6; fill: none; stroke-linecap: round; }
.fig-svg .weft      { stroke: var(--weft); stroke-width: 2.6; fill: none; stroke-linecap: round; }
.fig-svg .warp-thin { stroke: var(--warp); stroke-width: 1.4; fill: none; }
.fig-svg .weft-thin { stroke: var(--weft); stroke-width: 1.4; fill: none; }
.fig-svg .warp-fill { fill: color-mix(in oklab, var(--c-a) var(--tint), var(--paper-2)); stroke: none; }
.fig-svg .weft-fill { fill: color-mix(in oklab, var(--c-b) var(--tint), var(--paper-2)); stroke: none; }

/* A float: the run where one thread stays on the face. The quantity behind
   lustre, drape, snagging and abrasion, so it gets a colour of its own. */
.fig-svg .float      { stroke: var(--c-c); stroke-width: 3.4; fill: none; stroke-linecap: round; }
.fig-svg .float-mark { fill: var(--c-c); stroke: none; }

/* Separable layers — the check this site exists to make. */
.fig-svg .layer-1 { fill: color-mix(in oklab, var(--c-a) var(--tint), var(--paper-2)); stroke: none; }
.fig-svg .layer-2 { fill: color-mix(in oklab, var(--c-warn) var(--tint-strong), var(--paper-2)); stroke: none; }

/* The trellis: crossings that pin, and yarns that do not stretch. */
.fig-svg .trellis  { stroke: var(--c-e); stroke-width: 1.5; fill: none; }
.fig-svg .node     { fill: var(--c-e); stroke: none; }
.fig-svg .locked   { stroke: var(--c-warn); stroke-width: 2.4; fill: none; }

/* A claim under test, and one that failed. */
.fig-svg .measured   { stroke: var(--c-d); stroke-width: 2.2; fill: none; }
.fig-svg .refuted    { stroke: var(--c-warn); stroke-width: 2; stroke-dasharray: 5 4; fill: none; }
.fig-svg text.refuted { fill: var(--c-warn); stroke: none; }

/* Axes and general furniture. */
.fig-svg .axis       { stroke: var(--fig-soft); stroke-width: 1.4; fill: none; }
.fig-svg .grid       { stroke: var(--fig-faint); stroke-width: 0.9; }
.fig-svg .soft       { stroke: var(--fig-soft); stroke-width: 1.2; fill: none; }
.fig-svg .faint      { stroke: var(--fig-faint); stroke-width: 1; fill: none; }
.fig-svg .dot-a      { fill: var(--c-a); stroke: none; }
.fig-svg .dot-b      { fill: var(--c-b); stroke: none; }
.fig-svg .dot-d      { fill: var(--c-d); stroke: none; }
.fig-svg .dot-warn   { fill: var(--c-warn); stroke: none; }
.fig-svg .fill-a     { fill: color-mix(in oklab, var(--c-a) var(--tint), var(--paper-2)); }
.fig-svg .fill-b     { fill: color-mix(in oklab, var(--c-b) var(--tint), var(--paper-2)); }
.fig-svg .fill-c     { fill: color-mix(in oklab, var(--c-c) var(--tint), var(--paper-2)); }
.fig-svg .fill-d     { fill: color-mix(in oklab, var(--c-d) var(--tint), var(--paper-2)); }
.fig-svg text.mono   { font-family: var(--font-mono); }

/* A rule under section headings. */
.section-head::after { border-top-style: solid; }

/* --- dragging a parameter -------------------------------------------------
   Shear angle is this site's natural draggable axis — the whole bias argument
   is a sweep from square to locked — and float length is the other. The control
   sits under the caption, outside the SVG, so the figure keeps role="img" and
   the page reads correctly with the script absent. */
.drag-row { margin: 0.6rem 0 0; display: grid; gap: 0.35rem; }
.drag-slider { width: min(28rem, 100%); accent-color: var(--c-a); cursor: ew-resize; }
.drag-slider:focus-visible { outline: 2px solid var(--c-a); outline-offset: 3px; }
.drag-readout {
  margin: 0; font: 0.8rem/1.4 var(--font-ui); color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.drag-note { margin: 0; font: 0.74rem/1.4 var(--font-ui); color: var(--ink-3); }