/* METRONOME tokens: the single source of truth. Re-skin here first.
   The type scale is musical: every step is a just-intonation interval
   above the unison (body size). Headings on the pages are labeled with
   the interval they sound. */

@font-face {
  font-family: "Lora";
  src: url("../fonts/lora-var.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Lora";
  src: url("../fonts/lora-italic-var.woff2") format("woff2");
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Public Sans";
  src: url("../fonts/public-sans-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* primitives */
  --cream: #f8f5ee;        /* manuscript paper */
  --cream-2: #f0ecdf;
  --cream-3: #e6e1d0;
  --slate: #26292e;        /* the school's chalkboard slate */
  --slate-2: #2e3238;
  --slate-3: #383d44;
  --white: #ffffff;
  --mahogany-deep: #673235;   /* oxblood accent on cream grounds, 9.2:1 */
  --mahogany-bright: #a4465f; /* large marks + noteheads on slate; not for labels */
  --mahogany-lift: #c68b9d;   /* accent labels on slate grounds, 5.3:1 */

  /* semantics (cream, the default ground) */
  --bg: var(--cream);
  --bg-2: var(--cream-2);
  --fg: var(--slate);
  --muted: #595d64;
  --line: rgba(38, 41, 46, 0.18);
  --line-strong: rgba(38, 41, 46, 0.55);
  --accent: var(--mahogany-deep);
  --accent-raw: var(--mahogany-bright);
  --focus: #2b4ecc;

  /* type */
  --font-display: "Lora", Georgia, serif;
  --font-body: "Public Sans", "Helvetica Neue", Arial, sans-serif;

  /* the musical scale: unison is body size; each step is a true ratio */
  --t-unison: 1.0625rem;                              /* 1/1  body */
  --t-second: 1.195rem;                               /* 9/8  major second */
  --t-third: 1.328rem;                                /* 5/4  major third */
  --t-fourth: 1.417rem;                               /* 4/3  perfect fourth */
  --t-fifth: clamp(1.35rem, 2vw, 1.594rem);           /* 3/2  perfect fifth */
  --t-octave: clamp(1.7rem, 3vw, 2.125rem);           /* 2/1  octave */
  --t-octave-third: clamp(2rem, 3.8vw, 2.656rem);     /* 5/2  octave + third */
  --t-octave-fifth: clamp(2.2rem, 4.8vw, 3.1875rem);  /* 3/1  octave + fifth */
  --t-double-octave: clamp(2.5rem, 6vw, 4.25rem);     /* 4/1  double octave */
  --t-grand: clamp(2.9rem, 8.5vw, 6.375rem);          /* 6/1  double octave + fifth */
  --t-small: 0.9375rem;
  --t-label: 0.72rem;
  --lh-tight: 1.02;
  --lh-heading: 1.12;
  --lh-body: 1.6;
  --track-label: 0.14em;

  /* time: the declared tempo. One beat at 72 BPM; one bar of 4/4. */
  --beat: 833ms;
  --bar: 3332ms;
  --dur-1: 150ms;
  --dur-2: 320ms;
  --dur-3: 650ms;
  --ease-out: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-inout: cubic-bezier(0.83, 0, 0.17, 1);

  /* 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;
  --movement-pad: clamp(5rem, 12vh, 9rem);
  --gutter: clamp(1rem, 2.5vw, 1.5rem);
  --edge: clamp(1.25rem, 4vw, 3.5rem);
  --measure-width: 72rem;
  --phrase-width: 40rem;

  /* stave geometry */
  --stave-gap: 0.5rem;          /* distance between stave lines */
  --stave-line: rgba(38, 41, 46, 0.22);

  /* shape + depth */
  --r-1: 3px;
  --r-2: 8px;
  --r-pill: 999px;
  --shadow-1: 0 1px 2px rgba(38, 41, 46, 0.05), 0 10px 28px rgba(38, 41, 46, 0.07);

  /* layers */
  --z-rail: 45;
  --z-podium: 40;
  --z-backstage: 50;
  --z-skip: 60;
}

/* slate theme: any element with data-theme="slate" flips the semantic set */
[data-theme="slate"] {
  --bg: var(--slate);
  --bg-2: var(--slate-2);
  --fg: var(--cream);
  --muted: #aba595;
  --line: rgba(248, 245, 238, 0.2);
  --line-strong: rgba(248, 245, 238, 0.6);
  --accent: var(--mahogany-lift);
  --focus: #93acff;
  --stave-line: rgba(248, 245, 238, 0.24);
}