/* HOLLOW AND PINE tokens: the single source of truth.
   Warm archival monochrome with one faded ink. Re-skin here first.

   Measured (CIEDE2000, D65, and WCAG 2.1 contrast; see /styleguide):
     faded indigo deep   #38405C on foxed paper #EDE4D4 ...... 8.10:1
     faded indigo bright #A2AFD0 on walnut ink  #2A2119 ...... 7.20:1
     paper on ink ........................................... 12.52:1
     dE00 deep vs ion violet deep     #4636A8 ............... 14.96
     dE00 deep vs lilac deep          #7B5FB5 ............... 20.09
     dE00 deep vs stamp blue          #23479C ............... 12.29
     dE00 bright vs lilac bright      #A98BE0 ............... 13.20
     dE00 deep vs cobalt              #1F3FB8 ............... 15.48
     dE00 deep vs water blue          #145D8C ............... 15.58
     pencil #6B5D4A on paper ................................ 5.06:1
   The carded #3B3A6B measured 11.46 against ion violet deep and failed the
   above-12 rule, so the ink was shifted greener and darker until it cleared. */

@font-face {
  font-family: "Petrona";
  src: url("../fonts/petrona-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Petrona";
  src: url("../fonts/petrona-italic-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Epilogue";
  src: url("../fonts/epilogue-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* primitives */
  --paper: #ede4d4;        /* foxed paper */
  --paper-2: #e4d9c6;      /* deeper foxing, gutters and rules */
  --paper-3: #d8cbb3;      /* the edge of the leaf */
  --walnut: #2a2119;       /* walnut ink */
  --walnut-2: #201911;     /* the darkest bath */
  --walnut-3: #3a2f24;     /* a stroke laid twice */
  --indigo: #38405c;       /* the one faded ink, on paper */
  --indigo-bright: #a2afd0;/* the same ink, on walnut ground */
  --gray-warm: #5b5044;    /* pencil under the ink */
  --gray-warm-2: #6b5d4a;

  /* semantic (paper is the default leaf) */
  --bg: var(--paper);
  --bg-2: var(--paper-2);
  --fg: var(--walnut);
  --muted: var(--gray-warm);
  --line: rgba(42, 33, 25, 0.18);
  --line-strong: rgba(42, 33, 25, 0.52);
  --accent: var(--indigo);
  --accent-soft: rgba(56, 64, 92, 0.12);
  --focus: var(--indigo);

  /* type */
  --font-display: "Petrona", "Iowan Old Style", Georgia, serif;
  --font-body: "Epilogue", "Helvetica Neue", Arial, sans-serif;
  --t-display: clamp(2.6rem, 7.4vw, 6rem);
  --t-h1: clamp(2.2rem, 5.4vw, 4.25rem);
  --t-h2: clamp(1.75rem, 3.4vw, 2.9rem);
  --t-h3: clamp(1.2rem, 2vw, 1.55rem);
  --t-lyric: clamp(1.15rem, 1.9vw, 1.5rem);
  --t-lead: clamp(1.1rem, 1.6vw, 1.3rem);
  --t-body: 1.0625rem;
  --t-small: 0.875rem;
  --t-label: 0.7rem;
  --lh-tight: 1.02;
  --lh-heading: 1.12;
  --lh-body: 1.62;
  --lh-lyric: 1.85;
  --track-label: 0.18em;

  /* space */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --s-10: 8rem;
  --section-pad: clamp(4rem, 9vh, 7rem);
  --edge: clamp(1.15rem, 4vw, 3.5rem);
  --measure: 34rem;
  --max-w: 74rem;
  --gutter-margin: 15rem; /* the width of the annotation margin on wide leaves */

  /* shape */
  --r-1: 2px;
  --r-2: 5px;
  --rule-w: 1px;

  /* motion */
  --dur-1: 140ms;
  --dur-2: 280ms;
  --dur-3: 520ms;
  --dur-4: 820ms;
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);

  /* layers */
  --z-head: 30;
  --z-index-panel: 40;
  --z-skip: 60;
}

/* the walnut bath: any wrapper flips the whole semantic set */
[data-leaf="walnut"] {
  --bg: var(--walnut);
  --bg-2: var(--walnut-2);
  --fg: var(--paper);
  --muted: #b6a893;
  --line: rgba(237, 228, 212, 0.2);
  --line-strong: rgba(237, 228, 212, 0.58);
  --accent: var(--indigo-bright);
  --accent-soft: rgba(162, 175, 208, 0.16);
  --focus: var(--indigo-bright);
}