/* ═══════════════════════════════════════════════════════════════════════════
   tokens.css — the design system in one place.
   White studio. Blue is sound. Red is live. Yellow is the pen.
   Every page reads its colours, faces, sizes and easings from here; nothing
   else declares a colour literal.
   ═══════════════════════════════════════════════════════════════════════ */
:root {
  /* the set */
  --cyc: #FFFFFF;          /* the studio: pure white, on purpose */
  --cyc-2: #F3F4F7;        /* cool, blue-biased shadow */
  --cyc-3: #E9EBF0;
  --line: #DDE0E7;
  --line-2: #C9CDD8;
  --ink: #0E1118;          /* blue-black */
  --ink-2: #5C6373;
  --ink-3: #8A90A0;

  /* the lights */
  --sound: #2457F5;        /* James's voice, links, the Voice Line */
  --sound-2: #1B45CC;      /* hover / pressed */
  --sound-soft: #E7EDFF;
  --live: #E8352B;         /* the record dot, the live counter, the visitor's mic */
  --live-soft: #FDE8E6;
  --pen: #FFD21E;          /* the teacher's highlighter */
  --pen-soft: #FFF4C2;

  /* lights off */
  --black: #0A0C12;
  --black-2: #12151E;
  --on-black: #F5F6F8;
  --on-black-2: #A3A9B8;

  /* faces */
  --f-display: 'Bricolage Grotesque', 'Archivo', Impact, 'Arial Black', system-ui, sans-serif;
  --f-text: 'Figtree', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --f-ipa: 'Gentium Book Plus', 'Charis SIL', 'Noto Serif', Georgia, serif;
  --f-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* type scale */
  --t-body: clamp(1.05rem, 1rem + .3vw, 1.2rem);
  --t-lede: clamp(1.25rem, 1.1rem + .7vw, 1.6rem);
  --t-h3: clamp(1.5rem, 1.25rem + 1.2vw, 2.2rem);
  --t-h2: clamp(2.2rem, 1.5rem + 3vw, 4.2rem);
  --t-display: clamp(3rem, 1.8rem + 6vw, 7.5rem);
  --t-colossal: clamp(4.6rem, 2rem + 14.5vw, 17rem);

  /* motion */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-cut: cubic-bezier(.9, 0, .1, 1);
  --dur-1: .25s;
  --dur-2: .6s;
  --dur-3: 1.1s;

  /* layout */
  --bar-h: 60px;
  --bar-gap: 14px;
  --wrap: 1240px;
  --gutter: clamp(18px, 4vw, 56px);
  --radius: 18px;
  --radius-sm: 10px;
  --shadow-1: 0 1px 2px rgba(14, 17, 24, .05), 0 10px 30px -12px rgba(14, 17, 24, .18);
  --shadow-2: 0 2px 6px rgba(14, 17, 24, .08), 0 30px 60px -20px rgba(14, 17, 24, .28);
}