/* Chord Lens Studio — design tokens, from docs/design/studio/studio-tokens.css.

   Scoped to the Studio so the landing page keeps its own tokens in base.css:
   the redesign has a brighter brand red and its own stem and section colours.
   Values mirror the variables in the pen.dev design file.

   Light mode (decision 51): every colour is light-dark(light, dark), so each
   token is defined once. The page's color-scheme picks the side: dark by
   default (base.css), light from the rail toggle or the system (studio.css,
   "Light mode"). Components read tokens and never test the theme. */

/* Geist and Geist Mono, self-hosted (SIL OFL 1.1, see fonts/OFL.txt): the
   site makes one third-party request, Google Analytics, and no font CDN. */
@font-face {
  font-family: "Geist";
  src: url("/assets/fonts/Geist-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Geist Mono";
  src: url("/assets/fonts/GeistMono-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:where([data-app="studio"]) {
  /* Surfaces */
  --st-bg: light-dark(#f4f4f5, #09090b);
  --st-panel: light-dark(#fafafb, #0c0c0f);      /* rail, library, sheet panel, lane wells */
  --st-surface: light-dark(#ffffff, #111114);
  --st-surface-2: light-dark(#f1f1f3, #18181c);
  --st-line: light-dark(#e4e4e7, #26262c);
  --st-line-strong: light-dark(#d4d4d8, #34343c);
  /* The boundary of a control whose border is its only outline (a text field,
     the slider's typed-value box): 3:1 or more on --st-bg, --st-panel,
     --st-surface and --st-surface-2 (WCAG 1.4.11). */
  --st-line-control: light-dark(#7f7f88, #71717a);

  /* Text */
  --st-text: light-dark(#18181b, #f5f5f6);
  --st-text-dim: light-dark(#52525b, #a1a1aa);
  --st-text-faint: light-dark(#5f5f68, #80808a);
  --st-text-far: light-dark(#858587, rgb(245 245 246 / 0.3)); /* the live strip's ±3 names: 3.3:1 in light, the agreed 2.57:1 in dark (live.css) */

  /* Brand and meaning */
  --st-accent: light-dark(#d41843, #ff2d55);
  --st-accent-strong: light-dark(#be123c, #e11d48);
  --st-accent-soft: light-dark(rgb(212 24 67 / 0.1), rgb(255 45 85 / 0.13));
  --st-accent-deep: light-dark(#9f1239, #be123c);  /* the foot of the primary button's gradient */
  --st-focus-ring: var(--st-accent);
  --st-lock-open: light-dark(#d41843, #fb7185);  /* an unlocked section's open lock (sections.css) */
  --st-chord-ink: light-dark(#9a5b00, #f5c66b);  /* chord names in the sheet and chord tiles */
  --st-chord-ink-played: light-dark(#2e1a00, #f5c66b); /* a played chord, under opacity 0.62: 4.5:1 in both themes */
  --st-loop: light-dark(#c026d3, #e879f9);       /* the A–B loop, everywhere it appears */
  --st-loop-ink: light-dark(#a21caf, #f0abfc);
  --st-ok: light-dark(#147a3a, #4ade80);         /* finished steps on the splitting page */

  /* Stems: one colour each, for icon, meter, slider, pan pointer, waveform */
  --st-stem-vocals: light-dark(#cf2350, #ff4d6d);
  --st-stem-drums: light-dark(#a84d06, #f5a524);
  --st-stem-bass: light-dark(#6d28d9, #8b5cf6);
  --st-stem-piano: light-dark(#0f766e, #2dd4bf);
  --st-stem-guitar: light-dark(#1d4ed8, #3b82f6);
  --st-stem-other: light-dark(#48740e, #a3e635);
  --st-stem-metronome: light-dark(#5b54d6, #a5a1f7);

  /* Sections: shared by the mixer's Sections row, the chord sheet (lead and
     grid) and the player's progress bar */
  --st-sect-intro: light-dark(#1d4ed8, #60a5fa);
  --st-sect-verse: light-dark(#6d28d9, #a78bfa);
  --st-sect-chorus: light-dark(#a3154f, #f472b6);
  --st-sect-bridge: light-dark(#0b665f, #2dd4bf);
  --st-sect-outro: light-dark(#7f5300, #fbbf24);
  /* A section the API labels "other", and the neutral rail with no sections
     (T0 addition: SectionKind includes 'other'). */
  --st-sect-other: light-dark(#5c5c64, #80808a);

  /* Layout menu (layout-menu.css) */
  --st-menu-bg: light-dark(#ffffff, #141417);          /* the popover */
  --st-menu-foot-bg: light-dark(#f7f7f8, #101013);     /* its footer strip */
  --st-menu-chosen-bg: light-dark(#fff0f3, #1f0d13);   /* the chosen preset or saved chip */
  --st-menu-chosen-ink: light-dark(#be123c, #ffb3c1);  /* its text */
  --st-menu-thumb: light-dark(#d4d4d8, #3f3f46);       /* preset thumbnails: the blocks */
  --st-menu-thumb-strong: light-dark(#a1a1aa, #71717a); /* preset thumbnails: the lines */
  --st-popover-bg: light-dark(#ffffff, #18181c);       /* section picker, saved loops: white like the menus in light */

  /* P40: colours the areas had hard-coded */
  --st-text-strong: light-dark(#09090b, #fff);   /* the brightest ink: "now" text; the tint target of color-mix */
  --st-on-accent: #fff;                          /* text and marks on a coloured fill */
  --st-accent-ink: light-dark(#be123c, #ff8fa3); /* red as text: busy, errors in lists, "now" labels */
  --st-accent-edge: #ff6b85;                      /* the red buttons' top-edge outline */
  --st-accent-hi: #ff4468;                       /* the Split button's highlight stops */
  --st-accent-mid: #e4224a;
  --st-accent-pale: light-dark(#fb7185, #ffb3c1); /* the tip of the splitting progress bar */
  --st-error: light-dark(#dc2626, #ef4444);      /* clipping meters, failed outlines */
  --st-error-ink: light-dark(#b91c1c, #f87171);  /* failed text */
  --st-error-deep: light-dark(#fca5a5, #7f1d2d); /* a failed progress fill */
  --st-warn: light-dark(#a84d06, #f5a524);
  --st-ok-strong: light-dark(#16a34a, #22c55e);  /* the playing dot, done step markers */
  --st-on-chord-ink: light-dark(#fff, #1c1403);  /* text on a chord-ink fill (Solo on) */
  --st-on-loop: light-dark(#fff, #3b0a45);       /* text on a loop fill (the A/B handles) */
  --st-stem-audio: light-dark(#0d9488, #2dd4bf);     /* the mixer's Stem audio switch */
  --st-stem-audio-ink: light-dark(#0f766e, #5eead4);
  --st-stem-audio-on: light-dark(#0d9488, #14b8a6);
  --st-metronome-ink: light-dark(#4338ca, #e0deff);  /* the chosen metronome rate */
  --st-neutral: light-dark(#8a8a93, #52525b);    /* unplayed strip, thumbnail blocks */
  --st-switch-off: light-dark(#8a8a93, #34343c); /* a switch's off track: 3:1 on every light surface */
  /* What a dimmed ink (played, locked) mixes toward: nothing on dark; grey on
     light, where fading toward the page would drop under 4.5:1. */
  --st-fade: light-dark(#52525b, transparent);
  --st-shadow: light-dark(rgb(24 24 27 / 0.3), #000); /* mixed to each shadow's strength */
  --st-knob-hi: light-dark(#fff, #2c2c34);
  --st-knob-lo: light-dark(#e4e4e7, #141417);
  --st-avatar-bg: light-dark(#ffedd5, #7c2d12);
  --st-avatar-ink: light-dark(#9a3412, #fed7aa);
  /* Piano diagrams: white and black keys in both themes */
  --st-key: light-dark(#fff, #f5f5f6);
  --st-key-black: light-dark(#27272a, #09090b);
  --st-key-edge: light-dark(#71717a, #09090b);
  --st-key-tone: #52525b;
  /* Artwork (song art, examples): the same in both themes */
  --st-art-rose: #ff4d6d;
  --st-art-violet: #7c3aed;
  --st-art-amber: #f5a524;
  --st-art-red: #e11d48;
  --st-art-teal: #2dd4bf;
  --st-art-blue: #3b82f6;
  --st-art-lime: #a3e635;
  --st-art-sky: #0ea5e9;

  /* Type: Geist is self-hosted (README: one third-party request only) */
  --st-font: "Geist", var(--font);
  --st-font-mono: "Geist Mono", var(--font-mono);

  /* Radii used in the design */
  --st-radius-chip: 7px;
  --st-radius-control: 9px;
  --st-radius-card: 16px;
  --st-radius-hero: 22px;
}

/* Browsers without light-dark() (before Chrome 123, Safari 17.5, Firefox
   120) drop every token above, so they get the dark values here: dark only,
   the toggle has no effect there. Keep in sync with the dark side of each
   light-dark() above; theme.test.ts fails when they drift. */
@supports not (color: light-dark(#000, #fff)) {
  :where([data-app="studio"]) {
    --st-bg: #09090b;
    --st-panel: #0c0c0f;
    --st-surface: #111114;
    --st-surface-2: #18181c;
    --st-line: #26262c;
    --st-line-strong: #34343c;
    --st-line-control: #71717a;
    --st-text: #f5f5f6;
    --st-text-dim: #a1a1aa;
    --st-text-faint: #80808a;
    --st-text-far: rgb(245 245 246 / 0.3);
    --st-accent: #ff2d55;
    --st-accent-strong: #e11d48;
    --st-accent-soft: rgb(255 45 85 / 0.13);
    --st-accent-deep: #be123c;
    --st-lock-open: #fb7185;
    --st-chord-ink: #f5c66b;
    --st-chord-ink-played: #f5c66b;
    --st-loop: #e879f9;
    --st-loop-ink: #f0abfc;
    --st-ok: #4ade80;
    --st-stem-vocals: #ff4d6d;
    --st-stem-drums: #f5a524;
    --st-stem-bass: #8b5cf6;
    --st-stem-piano: #2dd4bf;
    --st-stem-guitar: #3b82f6;
    --st-stem-other: #a3e635;
    --st-stem-metronome: #a5a1f7;
    --st-sect-intro: #60a5fa;
    --st-sect-verse: #a78bfa;
    --st-sect-chorus: #f472b6;
    --st-sect-bridge: #2dd4bf;
    --st-sect-outro: #fbbf24;
    --st-sect-other: #80808a;
    --st-menu-bg: #141417;
    --st-menu-foot-bg: #101013;
    --st-menu-chosen-bg: #1f0d13;
    --st-menu-chosen-ink: #ffb3c1;
    --st-menu-thumb: #3f3f46;
    --st-menu-thumb-strong: #71717a;
    --st-popover-bg: #18181c;
    --st-text-strong: #fff;
    --st-accent-ink: #ff8fa3;
    --st-accent-pale: #ffb3c1;
    --st-error: #ef4444;
    --st-error-ink: #f87171;
    --st-error-deep: #7f1d2d;
    --st-warn: #f5a524;
    --st-ok-strong: #22c55e;
    --st-on-chord-ink: #1c1403;
    --st-on-loop: #3b0a45;
    --st-stem-audio: #2dd4bf;
    --st-stem-audio-ink: #5eead4;
    --st-stem-audio-on: #14b8a6;
    --st-metronome-ink: #e0deff;
    --st-neutral: #52525b;
    --st-switch-off: #34343c;
    --st-fade: transparent;
    --st-shadow: #000;
    --st-knob-hi: #2c2c34;
    --st-knob-lo: #141417;
    --st-avatar-bg: #7c2d12;
    --st-avatar-ink: #fed7aa;
    --st-key: #f5f5f6;
    --st-key-black: #09090b;
    --st-key-edge: #09090b;
  }
}