/*
  Design tokens for jessewilson.us.
  Everything visual that might be swapped later lives here.
*/
:root {
  /* Palette */
  --ink: #1f242a;
  --predawn: #26313b;
  --mist: #93a6b1;
  --water: #769fb6;
  --paper: #f3ede3;
  --sand: #e6d9bf;
  --cedar: #7a5c44;
  --ember: #b56a3f;
  --moss: #50723c; /* photography only, never a UI fill */

  /* Type: change the family here, nowhere else */
  --font-display: "Newsreader", "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --weight-display: 300;

  /*
    Sky states (top -> bottom of the viewport).
    Contrast checked for body text (WCAG AA 4.5:1):
      0 predawn      light text  >= 5.8:1
      1 first light  dark text   >= 6.2:1
      2 morning      dark text   >= 9:1
      3 day          dark text   >= 11:1
      4 ember        light text  >= 5.1:1
    Ember was darkened from the suggested #d9b08a -> #7a5c44, which failed
    for both light and dark text across part of its height.
  */
  --sky-0-top: #1f2a35;
  --sky-0-bottom: #4a5d6b;
  --sky-1-top: #93a6b1;
  --sky-1-bottom: #d7b894;
  --sky-2-top: #b7cad4;
  --sky-2-bottom: #f3ede3;
  --sky-3-top: #f3ede3;
  --sky-3-bottom: #e6d9bf;
  --sky-4-top: #7f5c43;
  --sky-4-bottom: #33261e;
  --ember-glow: 181 106 63; /* rgb triplet of --ember, for the evening glow */

  /* Text on the sky */
  --text-on-dark: var(--paper);
  --text-on-light: var(--ink);

  /* Signature / chrome ink (switched by sky.js via data-chrome-ink) */
  --chrome-ink: var(--paper);
  --chrome-warm: #f2d5b6;

  /* Motion */
  --ease-soft: cubic-bezier(.22, .61, .36, 1);
  --ease-water: cubic-bezier(.45, .05, .25, 1);
  --dur-slow: 1100ms;
  --dur-mid: 800ms;
  --dur-quick: 450ms;

  /* Shape and space */
  --radius-soft: 28px;
  --radius-small: 14px;
  --gutter: clamp(16px, 5vw, 64px);

  /* Cards */
  --card-fill: rgb(243 237 227 / .34);
  --card-fallback: rgb(243 237 227 / .86);
  --card-blur: 18px;
}

:root[data-chrome-ink="dark"] {
  --chrome-ink: var(--ink);
  --chrome-warm: #6b4a33;
}