/* Daily Chip's design tokens — the one palette every page, canvas and
   export shares. Names are what the pages already use; the logo's grid
   and shadow and the six voicing families join them so nothing is
   hardcoded twice. */
:root {
  --bg: #0f0b18;
  --panel: #181228;
  --panel2: #14101f;
  --line: #2b2342;
  --text: #f2eefb;
  --dim: #9d93b5;
  --accent: #7cf9ff;
  --accent2: #ff8ad8;
  --ok: #8affa0;
  --warn: #ffd479;
  --bad: #ff6b81;
  --on-accent: #06202a;   /* text on an --accent fill: primary buttons, armed chips */
  --grid: #ff8ad8;        /* the logo's ground grid and hard shadow */
  --shadow: #ff8ad8;
  --script: #7cf9ff;      /* the logo's two faces */
  --chip: #7cf9ff;
  /* the voicing families, as the lanes and the palette colour them */
  --arp: #7cf9ff;
  --chord: #ff8ad8;
  --bass: #8affa0;
  --kit: #ffd479;
  --melody: #c3a6ff;
  --fx: #ff9e7c;
  /* the fifths wheel: one hue a pitch class, thirty degrees a fifth (OKLCH
     L 0.76 C 0.12, the widest chroma all twelve fit in sRGB at), so a
     chord's root and a note on the same pitch are the same colour and
     harmonic neighbours are colour neighbours — C, G, D, A, E, B, F#, Db,
     Ab, Eb, Bb, F around the circle. Nothing is home: a deal's tonic is
     only likely, and what a set shows is its shape on the wheel. */
  --pc-0: #f4928a;   /* C */
  --pc-1: #5abdf2;   /* Db */
  --pc-2: #d4ab4f;   /* D */
  --pc-3: #b7a1f5;   /* Eb */
  --pc-4: #7fc581;   /* E */
  --pc-5: #ed90b5;   /* F */
  --pc-6: #31c7d5;   /* F# */
  --pc-7: #ec9c63;   /* G */
  --pc-8: #8caffe;   /* Ab */
  --pc-9: #afba5c;   /* A */
  --pc-10: #d896db;  /* Bb */
  --pc-11: #4acaad;  /* B */
  /* a deal's pool: each dealt melody and each dealt effect takes one of
     these, shuffled by the day, so the three melodies differ and the
     effects differ; a melody and an effect may match */
  --deal-0: var(--arp);
  --deal-1: var(--chord);
  --deal-2: var(--bass);
  --deal-3: var(--kit);
  --deal-4: var(--melody);
  --deal-5: var(--fx);
  --deal-6: var(--bad);
  --deal-7: #d9ff7c;
  --font-script: 'Yellowtail', 'Brush Script MT', cursive;
  --font-display: 'Bungee', 'Impact', sans-serif;
  --radius: 7px;
  --radius-card: 12px;
}