/* Paper and notation styles shared by the site, the print sheet and the debug page. */
@font-face {
  font-family: "Big Shoulders Stencil";
  src: url("../assets/fonts/BigShouldersStencil.ttf") format("truetype");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("../assets/fonts/AtkinsonHyperlegibleNext.ttf") format("truetype");
  font-weight: 200 800;
  font-display: swap;
}

:root {
  --desk: #dce3e8;
  --desk-deep: #c7d2da;
  --desk-ink: #5a6b7c;
  --paper: #fbf8f1;
  --paper-2: #f2ede2;
  --kraft: #e3d5bb;
  --ink: #1d3fbf;
  --ink-deep: #142a7d;
  --text: #13204f;
  --accent: #f04a23;
  --accent-deep: #c9330f;
  --grid: rgba(29, 63, 191, 0.13);
  --shadow: #0b1a4a;
  --display: "Big Shoulders Stencil", "Arial Narrow", Impact, sans-serif;
  --body: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: light;
}

.ff-svg { display: block; overflow: visible; }
.ff-front { fill: url(#ff-grid); }
.ff-back { fill: var(--kraft); }
.ff-front-flat { fill: var(--paper); }
.ff-back-flat { fill: var(--kraft); }
.ff-shade { fill: var(--shadow); stroke: none; }
.ff-edge { fill: none; stroke: var(--ink); stroke-opacity: 0.6; stroke-width: 1.1; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.ff-edge.soft { stroke-opacity: 0.14; }
.ff-crease { stroke: var(--ink); stroke-opacity: 0.25; stroke-width: 1; vector-effect: non-scaling-stroke; }
.ff-valley, .ff-mountain, .ff-cut { fill: none; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.ff-valley { stroke: var(--accent); stroke-width: 2.4; stroke-dasharray: 9 6; }
.ff-mountain { stroke: var(--accent); stroke-width: 2.4; stroke-dasharray: 13 5 2.5 5; }
.ff-cut { stroke: var(--ink); stroke-width: 2; stroke-dasharray: 2 5; }
.ff-arrow { fill: none; stroke: var(--ink); stroke-width: 2.2; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.ff-arrow-head { fill: var(--ink); }
.ff-arrow-head-open { fill: none; stroke: var(--ink); stroke-width: 2.2; vector-effect: non-scaling-stroke; stroke-linejoin: miter; }
.ff-shadow { fill: var(--shadow); }

@media (forced-colors: active) {
  .ff-front, .ff-front-flat { fill: Canvas; }
  .ff-back, .ff-back-flat { fill: Canvas; }
  .ff-edge, .ff-arrow, .ff-arrow-head-open, .ff-crease { stroke: CanvasText; }
  .ff-arrow-head { fill: CanvasText; }
  .ff-valley, .ff-mountain { stroke: Highlight; }
}