/* ===========================================================================
   Sample Notes — the design language.
   ===========================================================================

   One file, loaded by the app, the walkthrough and every static page, so there
   is exactly one place any of these decisions lives.

   TWO MODES, ONE SYSTEM. Paper is the brand: nobody in this category is light,
   it is what someone remembers, and it is the only way the printed sheet and
   the screen are ever the same design. Dark is not a concession — a beatmaker
   has a DAW open at one in the morning and that session is worth as much as the
   daytime one.

   The rule that makes it work: A COLOUR THAT ONLY WORKS IN ONE MODE DOES NOT GO
   IN THE PALETTE. Every value below is specified twice and the pair is designed
   together, never generated by inverting the other. Two consequences, and both
   are deliberate:

     · the brand LIFTS on dark, because a saturated red at low luminance
       vibrates against the background and blurs at small sizes;
     · the washes INVERT rather than darken, because a pale tint carries no
       meaning on a dark ground.

   COLOUR CARRIES TRUTH, NOT POSITION. The old palette spent four colours saying
   which card you were looking at. This one spends them saying how far to trust
   what you are reading — which is the one thing this product is about that no
   competitor says out loud. Cards are told apart by what is large on them.
   ========================================================================= */

:root {
  color-scheme: light;

  /* ── paper ───────────────────────────────────────────────────────────
     Warm off-white, not #fff. A white app beside a dark DAW at 1am is
     hostile, and this keeps the light-mode differentiation without glare. */
  --paper:#FBFAF8; --paper-2:#F4F2EE; --card:#FFFFFF;
  --ink:#17161A; --ink-2:#4A4852; --ink-3:#807D89; --rule:#E3E0DA;

  /* A band is not an inset surface. --paper-2 sits 2% off white: right behind
     a chord cell, invisible as a header on a white card. Two jobs, two values. */
  --band:#ECE8E0; --band-ink:#2A2831;

  /* ── the brand ───────────────────────────────────────────────────────
     Vermillion is Sample Notes. Warm enough to carry over from the amber
     heritage, saturated enough to hold on paper, and rare in a category that
     is otherwise entirely blue, purple and green.

     IT MEANS ONE THING: you can press this. Never used for data. */
  --brand:#E0431F; --brand-ink:#B8330F; --brand-wash:#FDF0EC;

  /* ── the meaning palette ─────────────────────────────────────────────
     Not "card 2" and "card 3". How far to trust what you are reading. */
  --measured:#0B7A63;  --measured-wash:#E8F5F1;   /* off the waveform */
  --model:#6B6875;     --model-wash:#F1F0ED;      /* a reconstruction */
  --unsure:#B06E00;    --unsure-wash:#FCF3E2;     /* sources disagree */
  /* Two sources agreeing is a stronger claim than one measurement. There is no
     green in the palette, so it is blended from measured rather than invented. */
  --confirmed:color-mix(in srgb, var(--measured) 70%, #7BD88F);

  --on-accent:#FFFFFF;
  --shadow:0 1px 2px rgba(20,18,25,.05);
  --e-2:0 18px 40px -20px rgba(20,18,25,.25);
  --e-3:0 24px 70px rgba(20,18,25,.22);
}

[data-theme="dark"] {
  color-scheme: dark;

  --paper:#0F0E12; --paper-2:#17161B; --card:#1C1B21;
  --ink:#EDECEF; --ink-2:#A9A6B2; --ink-3:#77747F; --rule:#2C2A32;
  --band:#26242D; --band-ink:#D8D5DF;

  --brand:#FF6A45; --brand-ink:#FF8A6B; --brand-wash:#2A1712;
  --measured:#2FC39E;  --measured-wash:#0E2B25;
  --model:#9A96A6;     --model-wash:#232128;
  --unsure:#E0A036;    --unsure-wash:#2E2413;
  --confirmed:color-mix(in srgb, var(--measured) 70%, #7BD88F);

  /* Dark text on a bright accent. Not pure black — the page ground is the
     darkest thing in the palette and reads softer under a saturated fill. */
  --on-accent:#231009;
  --shadow:0 1px 2px rgba(0,0,0,.4);
  --e-2:0 18px 40px -20px #000;
  --e-3:0 24px 70px rgba(0,0,0,.6);
}

:root {
  /* --accent is what components read. It resolves to the brand, and the four
     per-card overrides that used to live here are GONE: card identity colours
     were a quarter of the palette spent on telling you which box you were
     looking at, which you already knew. */
  --accent:var(--brand);
  --accent-tint:color-mix(in srgb, var(--accent) 11%, transparent);
  --accent-line:color-mix(in srgb, var(--accent) 45%, var(--rule));
  --accent-soft:color-mix(in srgb, var(--accent) 72%, var(--ink));

  --line-strong:color-mix(in srgb, var(--ink) 16%, var(--card));
  --surface-hi:color-mix(in srgb, var(--ink) 5%, var(--card));
  --surface-in:var(--paper-2);

  --r-xs:4px; --r-sm:8px; --r-md:12px; --r-lg:16px; --r-pill:999px;

  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px;
  --s-5:20px; --s-6:26px; --s-7:34px; --s-8:48px;

  /* Three heading roles, and they must not invert. Read a card top to bottom
     and the type gets quieter, never louder. Every "this label is getting
     lost" bug so far has been one of these three used for another's job. */
  --t-title:17px;      /* names a card. Outranks everything inside it. */
  --t-section:13.5px;  /* divides a card into parts. Over a rule. */
  --t-eyebrow:9.5px;   /* labels ONE value beside it. Never divides. */
  --t-tiny:10.5px; --t-meta:11.5px; --t-body:13.5px; --t-ui:14.5px;
  --t-h3:17px; --t-h2:22px; --t-hero:32px;

  --e-1:var(--shadow);
  --focus:2px solid var(--accent);
  --tap:.15s ease;

  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,sans-serif;
}

/* ── shared vocabulary ──────────────────────────────────────────────── */

.eyebrow{
  font-size:var(--t-eyebrow);letter-spacing:.1em;text-transform:uppercase;
  font-weight:650;color:var(--ink-3);
}
.hero{font-size:var(--t-hero);font-weight:680;letter-spacing:-.025em;line-height:1.1}
.tiny{font-size:var(--t-tiny);color:var(--ink-3);line-height:1.5}
.rule{height:1px;background:var(--rule);border:0;margin:var(--s-4) 0}

:where(button,a,input,select,[tabindex]):focus-visible{
  outline:var(--focus);outline-offset:3px;border-radius:var(--r-xs);
}

/* Colour is never the only signal, but where it reinforces one it should not
   also animate. */
@media (prefers-reduced-motion:reduce){ :root{--tap:0s} }