/* tokens.css - every colour, size and duration the site uses.
 *
 * Two rules govern this file.
 *
 * 1. A rock unit gets ONE colour and keeps it everywhere. Purple is the
 *    Farmington Canyon Complex in the cross section, in the canyon transect,
 *    in the map legend and in the panorama. A reader who learns it once should
 *    never have to learn it again.
 * 2. Every colour is defined on bare :root first. Dark mode only redefines
 *    values, never introduces them. That way a face missed in the dark block
 *    degrades to the light value rather than to nothing.
 *
 * The palette is taken from the place. Paper is the pale carbonate dust of the
 * bench; ink is wet gneiss; the accent is the rust of an oxidised alluvial fan
 * cut. Dark mode is the valley on a January night under an inversion, which is
 * not black but a flat brown-grey, because that is what it actually looks like.
 */

:root {
  color-scheme: light dark;

  /* -- surfaces and ink ------------------------------------------------ */
  --paper: #f7f4ed;
  --paper-raised: #fffdf8;
  --paper-sunk: #eee9df;
  --rule: #d9d2c4;
  --rule-strong: #b9b0a0;

  --ink: #22201c;
  --ink-soft: #55504a;
  --ink-faint: #857e74;
  --ink-invert: #f7f4ed;

  --accent: #a4501b;
  --accent-soft: #f0e0d2;
  --accent-ink: #ffffff;

  --focus: #1b6fb3;

  /* -- the rock and material palette, one meaning per colour ----------- */
  --u-basement: #534ab7; /* Farmington Canyon Complex, Paleoproterozoic gneiss */
  --u-foliation: #afa9ec; /* metamorphic foliation, drawn as line not fill */
  --u-rift: #d85a30; /* Neoproterozoic rift clastics and tillite */
  --u-quartzite: #1d9e75; /* Cambrian quartzite */
  --u-carbonate: #378add; /* Paleozoic carbonate */
  --u-carbonate-deep: #185fa5; /* Oquirrh Group and deeper carbonate */
  --u-fan: #ba7517; /* alluvial fan, lake sediment, debris */
  --u-water: #85b7eb;
  --u-hazard: #e24b4a; /* faults, hazard, debris basins */
  --u-fill: #888780; /* basin fill, concrete, engineered structures */
  --u-fill-deep: #5f5e5a;
  --u-bench: #e8d7b4; /* shoreline benches and markers */

  /* Panorama depth, near to far. Aerial perspective: distant ground is
     paler and bluer because there is more air in front of it. */
  --depth-1: #2c3a44;
  --depth-2: #435662;
  --depth-3: #61798a;
  --depth-4: #8ea4b4;
  --sky-low: #cfdcea;
  --sky-high: #9dbbd8;

  /* -- verification markers -------------------------------------------- */
  --mark-primary: #2f7d51;
  --mark-secondary: #4a7ba6;
  --mark-derived: #6b5aa8;
  --mark-contested: #b3781a;
  --mark-inferred: #8a6d3b;
  --mark-unverified: #b0442f;

  /* -- type ------------------------------------------------------------- */
  --font-body: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-ui: Inter, system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, 'Cascadia Mono', Consolas, 'Liberation Mono', monospace;

  --step--1: clamp(0.83rem, 0.81rem + 0.1vw, 0.88rem);
  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.09rem);
  --step-1: clamp(1.2rem, 1.13rem + 0.35vw, 1.4rem);
  --step-2: clamp(1.44rem, 1.32rem + 0.6vw, 1.8rem);
  --step-3: clamp(1.73rem, 1.53rem + 1vw, 2.32rem);
  --step-4: clamp(2.07rem, 1.75rem + 1.6vw, 3rem);

  /* -- space and shape --------------------------------------------------- */
  --gap-1: 0.35rem;
  --gap-2: 0.7rem;
  --gap-3: 1.15rem;
  --gap-4: 1.9rem;
  --gap-5: 3rem;
  --gap-6: 4.5rem;

  --radius: 6px;
  --radius-lg: 12px;

  --measure: 34rem; /* comfortable reading width for the body serif */
  --wide: 62rem;

  --nav-h: 3.25rem;

  --shadow-1: 0 1px 2px rgb(34 32 28 / 0.07), 0 2px 8px rgb(34 32 28 / 0.05);
  --shadow-2: 0 2px 6px rgb(34 32 28 / 0.1), 0 10px 28px rgb(34 32 28 / 0.09);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --paper: #17171a;
    --paper-raised: #1f2024;
    --paper-sunk: #101012;
    --rule: #34353a;
    --rule-strong: #4c4e55;

    --ink: #ece8e0;
    --ink-soft: #b6b1a8;
    --ink-faint: #85817a;
    --ink-invert: #17171a;

    --accent: #e8a05c;
    --accent-soft: #3a2a1c;
    --accent-ink: #17171a;

    --focus: #6fb6ff;

    --u-basement: #8f88e6;
    --u-foliation: #c6c1f2;
    --u-rift: #ef8259;
    --u-quartzite: #3fc79b;
    --u-carbonate: #62a9f0;
    --u-carbonate-deep: #3d84c9;
    --u-fan: #e0a04b;
    --u-water: #6ba3dd;
    --u-hazard: #ff7a72;
    --u-fill: #9d9c95;
    --u-fill-deep: #74736e;
    --u-bench: #d6c19a;

    --depth-1: #0f1519;
    --depth-2: #1b262d;
    --depth-3: #2b3b46;
    --depth-4: #40545f;
    --sky-low: #1b222b;
    --sky-high: #131920;

    --mark-primary: #6cc491;
    --mark-secondary: #85b6e0;
    --mark-derived: #a99ae4;
    --mark-contested: #e3ab54;
    --mark-inferred: #c4a570;
    --mark-unverified: #ff8a72;

    --shadow-1: 0 1px 2px rgb(0 0 0 / 0.4), 0 2px 8px rgb(0 0 0 / 0.3);
    --shadow-2: 0 2px 6px rgb(0 0 0 / 0.45), 0 10px 28px rgb(0 0 0 / 0.4);
  }
}

/* The explicit choice wins over the system in both directions. */
:root[data-theme='dark'] {
  --paper: #17171a;
  --paper-raised: #1f2024;
  --paper-sunk: #101012;
  --rule: #34353a;
  --rule-strong: #4c4e55;

  --ink: #ece8e0;
  --ink-soft: #b6b1a8;
  --ink-faint: #85817a;
  --ink-invert: #17171a;

  --accent: #e8a05c;
  --accent-soft: #3a2a1c;
  --accent-ink: #17171a;

  --focus: #6fb6ff;

  --u-basement: #8f88e6;
  --u-foliation: #c6c1f2;
  --u-rift: #ef8259;
  --u-quartzite: #3fc79b;
  --u-carbonate: #62a9f0;
  --u-carbonate-deep: #3d84c9;
  --u-fan: #e0a04b;
  --u-water: #6ba3dd;
  --u-hazard: #ff7a72;
  --u-fill: #9d9c95;
  --u-fill-deep: #74736e;
  --u-bench: #d6c19a;

  --depth-1: #0f1519;
  --depth-2: #1b262d;
  --depth-3: #2b3b46;
  --depth-4: #40545f;
  --sky-low: #1b222b;
  --sky-high: #131920;

  --mark-primary: #6cc491;
  --mark-secondary: #85b6e0;
  --mark-derived: #a99ae4;
  --mark-contested: #e3ab54;
  --mark-inferred: #c4a570;
  --mark-unverified: #ff8a72;

  --shadow-1: 0 1px 2px rgb(0 0 0 / 0.4), 0 2px 8px rgb(0 0 0 / 0.3);
  --shadow-2: 0 2px 6px rgb(0 0 0 / 0.45), 0 10px 28px rgb(0 0 0 / 0.4);
}