/* Shared design system: the only source of colour, type and shape.
   Mode follows the system (Paper light, Night dark); data-theme="paper" or
   "night" on any element forces one. data-category on any element sets --acc
   for it and its children. Colours are light-dark(Paper, Night), which needs
   Safari 17.5+, Chrome 123+ or Firefox 120+; older engines get Paper. */

@font-face {
  font-family: "Inter Tight";
  src: url("fonts/InterTight.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("fonts/GeistMono.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  color-scheme: light dark;

  /* Dusk on haze: a mauve-grey evening paper, a violet-black night. */
  --ground:   light-dark(#e9e4e6, #15121a);
  --ground-2: light-dark(#f2eef0, #1c1822);
  --band:     light-dark(#e0dade, #1a1620);
  --line:     light-dark(#cfc6cc, #2f2936);
  --ink:      light-dark(#1a1620, #ece6ee);
  --ink-mut:  light-dark(#635b67, #93899a);
  /* The demo shell's "DEMO" mark, laid over the demo at a low alpha
     (demoshell.css): the ink, so it shows on every ground and on top of
     notes, within what check-contrast.mjs allows where it crosses text. */
  --mark:     light-dark(#1a1620, #ece6ee);

  /* Without a category the accent is ink. */
  --acc: var(--ink);

  /* One colour per drum part, wherever drums are drawn (YSAD's circle, dials
     and pads). A fixed categorical set in the dusk family, no orange: kick
     coral-rose, snare steel teal, hats olive-lime, perc violet. check-drums.mjs
     gates every pair in both modes: lightness band, colourblind separation
     (deuteranopia, protanopia, tritanopia), normal-vision separation, 3:1 on
     the ground. */
  --drum-kick:  light-dark(#a33445, #ff7a86);
  --drum-snare: light-dark(#2f7a8c, #4fb4c8);
  --drum-hats:  light-dark(#778916, #b4c840);
  --drum-perc:  light-dark(#6b4fbf, #b29aff);

  --font-sans: "Inter Tight", -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  /* Heads: heavy and tight, in their own case (a voice line is written
     lowercase, a name as it is spelled). Inter Tight has no width axis, so the
     stretch stays at 100% (kept as a token for anything that still reads it). */
  --head-stretch: 100%;
  --head-weight: 900;
  --head-tracking: -0.02em;
  --head-case: none;
  /* Buttons and interface labels: the mono in capitals, a hair of tracking so
     the caps don't crowd. */
  --button-case: uppercase;
  --button-tracking: 0.01em;

  --space: 8px;
  --radius: 0;
  --hairline: 1px solid var(--line);
}

[data-theme="paper"] { color-scheme: light; }
[data-theme="night"] { color-scheme: dark; }
/* data-theme only flips color-scheme by default; repaint the surface too, or a
   themed child (e.g. <aside data-theme="night"> inside a Paper page) shows
   the wrong ink on the parent's ground. */
[data-theme] { background-color: var(--ground); color: var(--ink); }

/* Category accents mean "active / now". Any element may carry data-category. */
/* Steel teal, evening violet, olive, coral-pink. */
[data-category="transcribe"] { --acc: light-dark(#326a7a, #7fbccc); }
[data-category="transform"]  { --acc: light-dark(#5c4a9e, #a796e6); }
[data-category="perceive"]   { --acc: light-dark(#5f652a, #bcc47c); }
[data-category="workflow"]   { --acc: light-dark(#a54357, #f0919f); }

/* Engines without light-dark(): Paper only. Must equal the Paper values above;
   check-contrast.mjs enforces it. */
@supports not (color: light-dark(#000000, #ffffff)) {
  :root, [data-theme] { color-scheme: light; }
  :root {
    --ground: #e9e4e6;
    --ground-2: #f2eef0;
    --band: #e0dade;
    --line: #cfc6cc;
    --ink: #1a1620;
    --ink-mut: #635b67;
    --mark: #1a1620;
    --drum-kick: #a33445;
    --drum-snare: #2f7a8c;
    --drum-hats: #778916;
    --drum-perc: #6b4fbf;
  }
  [data-category="transcribe"] { --acc: #326a7a; }
  [data-category="transform"]  { --acc: #5c4a9e; }
  [data-category="perceive"]   { --acc: #5f652a; }
  [data-category="workflow"]   { --acc: #a54357; }
}