/* NOTE tokens — "Light, not chrome" (art direction v2).
   The product is light moving through water and glass, so the interface is made
   of that light: dark smoked glass carrying the live scene's colour, and type that
   lights up when chosen. One typeface, five sizes, three weights, no tracked caps.
   Loaded as a static <link> after release.css. The older token names at the end
   are aliases, kept so nothing that still reads them breaks. */
:root {
  /* Colour: ink, paper, one light */
  --note-casing: #0d0d0c;          /* the instrument body */
  --note-paper: #f2efe8;
  --note-text: #f2efe8;            /* 100% */
  --note-text-muted: #bdbab3;      /* labels and secondary text */
  --note-text-faint: #a19e98;      /* unselected options; >= 4.5:1 on the glass over a light scene */
  --note-text-disabled: #5e5c58;   /* disabled only */
  --note-rule: #f2efe81f;          /* hairline between sections */
  --note-track: #f2efe840;         /* slider track */
  --note-danger: #ff6b5e;
  --scene-accent: #7fd3c4;         /* set per scene at runtime; a point of light only */
  --scene-accent-ink: #0d0d0c;
  --note-glow: 0 0 10px 1px var(--scene-accent); /* the selection light */
  --note-legibility: 0 0 12px #0008; /* type set straight on the scene */

  /* Material: panels are the instrument casing itself — solid, same colour as the frame
     (owner, 2026-09-27: no translucency). The --note-glass-* names are kept for the rules that read them. */
  --note-glass-bg: var(--note-casing);
  --note-glass-filter: none;
  --note-glass-edge: rgb(255 255 255 / .08);
  --note-glass-fallback: var(--note-casing);
  --note-radius-panel: var(--note-radius-frame); /* panels share the frame's corner */
  --note-radius-poster: 6px;
  --note-radius-focus: 2px;
  --note-radius-frame: 28px;       /* the display glass */

  /* Type: one family, three weights, five sizes, sentence case */
  --note-font: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --note-numeric: tabular-nums lining-nums;
  --note-weight-light: 300;
  --note-weight-text: 400;
  --note-weight-label: 500;        /* the selected word */
  --note-text-xs: 12px;  /* labels: sentence case, muted */
  --note-text-sm: 14px;  /* controls and text in panels */
  --note-text-md: 18px;  /* item titles */
  --note-text-lg: 28px;  /* panel titles, 300 */
  --note-text-xl: 44px;  /* display numerals, 300 */
  --note-leading: 1.35;
  --note-leading-display: 1.05;

  /* Grid: 8px base, tight rows */
  --note-pad: 24px;                /* panel padding; 20px on phones */
  --note-label-gap: 4px;           /* a label sits this close to what it labels */
  --note-row-gap: 12px;
  --note-dot: 6px;
  --note-target: 44px;

  /* Motion */
  --note-ease: cubic-bezier(.22, .75, .22, 1);
  --note-dur: 240ms;               /* panels fade and rise */
  --note-dur-fade: 200ms;          /* a selection dot fades in */
  --note-dur-glide: 280ms;         /* a selection dot glides */
  --note-dur-drawer: 320ms;        /* the tray slides */
  --note-dur-frame: 400ms;
  --note-rise: 8px;

  /* ---- Aliases for older names ---- */
  --note-surface: var(--note-casing);
  --note-surface-raised: var(--note-casing);
  --note-surface-sunken: var(--note-casing);
  --note-selected: var(--note-casing);
  --note-scrim: #0d0d0cd9;
  --note-line: var(--note-rule);
  --note-line-strong: var(--note-rule);
  --note-mono: var(--note-font);
  --note-focus: #f2efe8;
  --note-focus-ring: 0 0 0 1px var(--note-text);
  --note-leading-tight: var(--note-leading-display);
  --note-space-1: 4px;
  --note-space-2: 8px;
  --note-space-3: 12px;
  --note-space-4: 16px;
  --note-space-5: 24px;
  --note-space-6: 32px;
  --note-radius-sm: 2px;
  --note-radius-md: 6px;
  --note-radius-lg: 14px;
  --note-radius-pill: 14px;
  --note-shadow: none;
}

@media (max-width: 600px) {
  :root { --note-pad: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --note-dur: 0ms;
    --note-dur-fade: 0ms;
    --note-dur-glide: 0ms;
    --note-dur-drawer: 0ms;
    --note-dur-frame: 0ms;
    --note-rise: 0px;
  }
}