/* Strata: fonts, colour tokens and the hatch tiles of the geological log. */

@font-face {
  font-family: 'Geologica Variable'; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url(assets/fonts/geologica-latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist Mono'; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url(assets/fonts/GeistMono-Variable.woff2) format('woff2-variations');
}

:root {
  --sans: "Geologica Variable", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Consolas, monospace;   /* record values: addresses, hostnames, dates */

  --bg: #0B0F14;
  --panel: #121821;
  --panel-2: #1C2531;
  --text: #EEF2F5;
  --text-2: #9DA9B6;
  --text-3: #7C8896;        /* 4.5:1 on --bg and --panel only; never on --panel-2 */
  --line: rgba(255, 255, 255, .1);
  --accent: #57D36B;        /* malachite: the layer being drilled, and the bedrock finding. Nothing else. */
  --accent-ink: #06200C;    /* text on malachite */
  --accent-line: #2B6B3A;   /* a flat, darker malachite for 1px edges */
  --drill: #0F2A19;         /* the fill of a layer while the drill is in it */

  /* The six layers: six flat shades from --panel to --panel-2. */
  --s1: #121821; --s2: #141B24; --s3: #161D27; --s4: #18202B; --s5: #1A222E; --s6: #1C2531;
  --ink: #445161;           /* hatch lines on a layer that has been read */
  --ink-dim: #29323E;       /* hatch lines on a layer the drill has not reached */
  --rule: #3A4553;          /* connectors and gauge ticks */

  /* Hatch tiles, used as masks so one tile can be drawn in any flat colour. */
  --h-dots: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Ccircle cx='3' cy='3' r='1.2'/%3E%3Ccircle cx='9' cy='9' r='1.2'/%3E%3C/svg%3E");
  --h-dash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10'%3E%3Cpath d='M1 2.5h7M9 7.5h7' fill='none' stroke='black' stroke-width='1.3'/%3E%3C/svg%3E");
  --h-brick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='12'%3E%3Cpath d='M0 .5h20M0 6.5h20M5 .5v6M15 6.5v6' fill='none' stroke='black' stroke-width='1.1'/%3E%3C/svg%3E");
  --h-diag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10'%3E%3Cpath d='M-2 2l4-4M0 10L10 0M8 12l4-4' fill='none' stroke='black' stroke-width='1.2'/%3E%3C/svg%3E");
  --h-ring: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='14'%3E%3Cg fill='none' stroke='black' stroke-width='1.1'%3E%3Ccircle cx='5' cy='4' r='2.3'/%3E%3Ccircle cx='14' cy='11' r='2.3'/%3E%3C/g%3E%3C/svg%3E");
  --h-wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='8'%3E%3Cpath d='M0 4q6-3.5 12 0t12 0' fill='none' stroke='black' stroke-width='1.2'/%3E%3C/svg%3E");
  --h-cross: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M2 4h5M4.5 1.5v5M10 12h5M12.5 9.5v5' fill='none' stroke='black' stroke-width='1.3'/%3E%3C/svg%3E");
}