/* Design tokens: Academia / Classical. A library at night: mahogany, aged oak, parchment and brass.
   Colour belongs to the method only as pigment: each of the five parts owns one aged ink, printed on its sleeves and numbers.
   Brass is the colour of everything you can press. Loaded before site.css and menu.css on every built page.
   A warm parchment version is used when the device (or the footer's choice) asks for light. */

:root {
  /* the library at night */
  --mahogany: #1C1714;   /* deep wood: the page */
  --oak: #251E19;        /* aged oak: cards and panels, one layer up */
  --parchment: #E8DFD4;  /* antique parchment: text */
  --leather: #3D332B;    /* worn leather: quiet fills */
  --faded-ink: #9C8B7A;  /* secondary text */
  --grain: #4A3F35;      /* wood grain: borders and rules */
  --brass: #C9A962;      /* polished brass: every interactive thing */
  --brass-light: #D4B872;
  --brass-dark: #B8953F;
  --crimson: #8B2635;    /* library crimson: wax seals and hover transforms, sparingly */
  --brass-gradient: linear-gradient(180deg, #D4B872 0%, #C9A962 50%, #B8953F 100%);
  --engraved: 1px 1px 1px rgba(0, 0, 0, .4), -1px -1px 1px rgba(255, 255, 255, .1);

  /* the five parts, as aged pigments (never a pure or bright colour) */
  --paper: #E8DFD4;      /* text printed on a dark ink */
  --black: #1C1714;      /* text printed on a light ink, and Part V's field */
  --chrome: #CB8A2B;     /* ochre: part I, Foundations (stages 0-4) */
  --vermilion: #A93A2E;  /* madder: part II, Lines (stages 5-7) */
  --cobalt: #35569F;     /* lapis: part III, Harmony (stages 8-10) */
  --viridian: #216657;   /* verdigris: part IV, Piano, voice and tunes (11-13) */
                         /* Part V, Practice and philosophy (14-15), is printed in mahogany */

  /* semantic: what pages use */
  --bg: var(--mahogany);
  --ink: var(--parchment);
  --grey: var(--faded-ink);
  --rule: var(--grain);
  --panel: var(--oak);
  --link: var(--brass);         /* brass as text on this page */
  --focus: var(--brass);
  --accent-line: var(--brass);  /* brass as a border or an underline */
  --on-link: #1C1714;           /* text on a brass fill */
  /* each part's ink as text or a large numeral on the page: lightened on mahogany, deepened on parchment */
  --chrome-text: #CB8A2B;
  --vermilion-text: #E0735F;
  --cobalt-text: #8FA6E8;
  --viridian-text: #52B8A0;

  --font-heading: "Cormorant Garamond", "Noto Music", "Cormorant", Georgia, serif;
  --font-body: "Crimson Pro", "Noto Music", "Crimson Text", Georgia, serif;
  --font-display: "Cinzel", "Noto Music", "Trajan Pro", Georgia, serif;
  --font-quote: var(--font-heading);
  --sans: var(--font-body);     /* older stylesheets still say --sans and --barry */
  --barry: var(--font-quote);

  /* type scale: Crimson Pro reads small, so the whole scale sits a step above a sans-serif one */
  --t-xs: 15px;
  --t-s: 17px;
  --t-m: 19px;
  --t-l: 24px;
  --t-xl: 32px;
  --t-2xl: 42px;
  --t-3xl: 56px;
  --t-4xl: 72px;
  --t-5xl: 96px;

  /* spacing, on a 4px step */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px;  --s-4: 16px;  --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px;  --s-9: 96px;

  --radius: 4px;
  --arch: 40% 40% 0 0 / 20% 20% 0 0;   /* the cathedral arch */
  --measure: 38em;   /* the longest comfortable line of reading text */
  --ease: ease-out;
  --t-fast: 150ms; --t-base: 300ms; --t-slow: 500ms; --t-dramatic: 700ms;

  color-scheme: dark;

  --gutter: 80px;
  --max: 1280px;
  --narrow: 100%;
}

/* parchment: the same library by day */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #F2E9D8;
    --ink: #2B2119;
    --grey: #5F4F40;
    --rule: #CDBB9C;
    --panel: #E9DDC6;
    --link: #6E500E;
    --focus: #6E500E;
    --accent-line: #7F6118;
    --on-link: #F2E9D8;
    --chrome-text: #7C5210;
    --vermilion-text: #A93A2E;
    --cobalt-text: #35569F;
    --viridian-text: #216657;
    --engraved: 1px 1px 1px rgba(0, 0, 0, .25), -1px -1px 1px rgba(255, 255, 255, .5);
    color-scheme: light;
  }
}
:root[data-theme="light"] {
  --bg: #F2E9D8;
  --ink: #2B2119;
  --grey: #5F4F40;
  --rule: #CDBB9C;
  --panel: #E9DDC6;
  --link: #6E500E;
  --focus: #6E500E;
  --accent-line: #7F6118;
  --on-link: #F2E9D8;
  --chrome-text: #7C5210;
  --vermilion-text: #A93A2E;
  --cobalt-text: #35569F;
  --viridian-text: #216657;
  --engraved: 1px 1px 1px rgba(0, 0, 0, .25), -1px -1px 1px rgba(255, 255, 255, .5);
  color-scheme: light;
}