/* ═══════════════════════════════════════════════════════════════════════════
   TOKENS - the brand layer, shared by every page on the site
   ═══════════════════════════════════════════════════════════════════════════

   This file is the ONE definition of what TrackBack looks like: colour,
   typeface, corner, shadow and the speed things move at. Both surfaces link it
   (app.html and index.html), so a value changed here changes the whole site.

   What belongs here:   anything a person would recognise as "the brand" -
                        a colour, a typeface, a radius, a duration.
   What does NOT:       type SIZE, spacing and control height. The marketing
                        page is editorial and fluid; the app is a dense
                        keyboard-first dashboard. They are different products
                        of the same brand and they size things differently, on
                        purpose. Those scales live in public/style.css (app)
                        and the --lp- block in index.html (landing).

   ── The palette ──────────────────────────────────────────────────────────

   A near-neutral charcoal: the reference is a dim control room, not lit
   instrument glass. Two rules keep it soft.

   1. Chroma stays low everywhere. No colour on this site is near full
      saturation, including the amber.
   2. THE NEUTRALS ARE NEUTRAL. The field, the panels, the borders, the type
      and the waveform are grey: zero to two units of red over blue, where they
      used to carry five to nine and read as brown. The lighter a value is, the
      more a tint shows, so what warmth is left is on the pale end (--text-dim,
      --text-muted) and the dark end is neutral outright. The amber is the only
      colour in the room, and it works because nothing around it competes.

   AMBER IS A SIGNAL, NOT A WASH. It marks the time on a note, the current
   version, the step you are on, and one button per screen. If amber is on
   something that is not "this is the moment" or "this is the thing to press",
   it is wrong. It is also the brand mark (see favicon.svg).

   Body and supporting text clear 4.5:1. The light-theme amber accent is a
   deliberate visual exception at 3:1; check a new value before adding it.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Field and surfaces ─────────────────────────────────────────────────
     Five steps, each one a little lighter than the last. Depth is built by
     stepping this ramp and drawing a hairline, never by dropping a shadow:
     see --shadow-soft below. */
  --bg:             #171717;   /* the page */
  --bg-2:           #1c1c1c;   /* a recessed band across the page */
  --surface:        #212121;   /* a panel, a dialog, a real surface */
  --surface-2:      #272727;   /* inside a panel: inputs, nested rows */
  --surface-raised: #2d2d2c;   /* a thing that floats: dropdown, popover */

  /* A field you type a paragraph INTO - the comment composer. It has to read
     as a hole in the panel rather than part of it, and "read as a hole" is a
     different direction in each theme: lighter than --surface on charcoal,
     white on the light field. That is why this is its own token and not
     --surface-2, which is one fixed step of the ramp. */
  --field:          #272727;

  --border:         #393938;   /* a line you are meant to notice */
  --border-soft:    #2a2a2a;   /* a line that only separates */

  --text:           #e5e5e4;   /* what you read */
  --text-dim:       #a8a8a6;   /* what you read second */
  /* Set by the worst case, not the best: muted type sits on --surface-raised
     as well as on the page, and the value that cleared 4.5:1 on the field was
     3.6:1 inside a dropdown. */
  --text-muted:     #9a9a98;   /* labels, placeholders, timestamps */

  /* ── Amber ──────────────────────────────────────────────────────────────
     Two jobs, and on charcoal one value does both: amber as TYPE (a timecode,
     a step numeral) and amber as a FILL you put type on (the one button per
     screen). Light on dark clears 4.5:1 either way round, so --accent and
     --accent-fill are the same colour here. They are not in the light theme -
     see the note there before reaching for one of them. */
  --accent:         #e0a35a;   /* amber as type, a hairline, a mark */
  --accent-fill:    #e0a35a;   /* amber as a filled control, with --accent-on type */
  --accent-hi:      #f0b976;   /* hover on an amber fill */
  --accent-dim:     #7d5322;   /* a border or focus ring carrying amber quietly */
  --accent-on:      #1b1a19;   /* type sitting ON --accent-fill */
  --accent-subtle:  rgba(224, 163, 90, 0.09);   /* an amber-tinted row */

  /* ── The waveform ─────────────────────────────────────────────────────
     Plain grey. It used to be deliberately COOL, to read as metal sitting in a
     warm room - but the room is neutral now, so a blue cast had nothing left
     to play against and only showed up as a tint. Played audio is painted
     --accent, which is why no status colour may be amber. */
  --wave:           #565656;   /* unplayed bars */
  --wave-hover:     #cdcdcc;   /* the scrub cursor */

  /* ── Comment statuses ─────────────────────────────────────────────────
     The six states a note can be in. Mirrored by STATUS_META in
     views/track.js, which references these names rather than repeating the
     values - change a hue here and the app, the markers and the landing
     page's hero all follow.

     These are the app's status hues pulled well back in saturation. At marker
     size on a soft field, a full-strength blue or green reads as neon. */
  --status-open:     #85a7b2;  /* needs someone to act */
  --status-todo:     #8b9fc8;  /* on the list for this pass */
  --status-urgent:   #cf8b84;  /* needs attention now */
  --status-question: #a294c4;  /* waiting on an answer, not a fix */
  --status-closed:   #8bb294;  /* addressed and done */
  --status-wontdo:   #8f8b85;  /* decided against */

  /* An untagged note, and the fallback wherever a colour is missing. */
  --marker-default: #7ea798;
  /* Neutral halo behind a point marker. Pure black rather than a tint of --bg:
     a tinted halo reads as a coloured fringe against the amber progress fill. */
  --marker-halo:    rgba(0, 0, 0, 0.4);

  /* Type and glyphs sitting ON a colour from the data palette (a tag dot, the
     disc behind someone's initials). Those colours are stored in the database
     and cannot follow the theme, so neither can this: it is near-black in both,
     which clears 4.5:1 on every swatch in modules/palette.js. White does not. */
  --on-data:        #1b1a19;

  /* ── Meaning ──────────────────────────────────────────────────────────── */
  --error:          #d08a80;
  --success:        #8bb294;
  /* An instrument named in a note. Teal, matching an untagged marker: both
     mean "a thing inside the audio". */
  --instrument-color: #7ea798;

  /* ── Overlays ─────────────────────────────────────────────────────────── */
  --overlay:        rgba(0, 0, 0, 0.55);
  --modal-shadow:   rgba(0, 0, 0, 0.5);

  /* ── Typefaces ────────────────────────────────────────────────────────
     ONE family does everything. Archivo carries a width axis, so a heading
     and its body text are the same typeface at two widths rather than two
     faces pretending to be a pairing. Never introduce a third.

     Mono is for values that have to line up against other values - a
     timecode, a duration, a file size, a count. NOT for names: instruments,
     people, tracks and prose are always sans. */
  --font-sans: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;

  /* The width axis. Display is stretched toward the panel-legend end of
     Archivo, the way a legend is silkscreened onto studio hardware; text sits
     at normal so the measure stays readable. Set these with
     `font-variation-settings: "wdth" var(--wd-title)`. */
  --wd-text:    100;
  --wd-title:   108;
  --wd-display: 118;

  /* ── Corners ──────────────────────────────────────────────────────────
     Three steps, and they are small. The logo is pixel art and the marketing
     page's hero waveform is drawn as square bars on a fixed grid, so the
     interface is built on the same grid: things are cut, not moulded. (The
     app's real waveform is a continuous envelope - see modules/player.js.)

     THERE IS NO PILL. A 999px radius on a chip, a badge or a filter is the
     one shape this site does not use - it was the loudest thing the old app
     wore. A circle survives in exactly one place: an avatar, because people
     are round. */
  --radius-sm: 3px;   /* chips, badges, buttons, inputs, kbd keys, status marks */
  --radius:    6px;   /* panels, dialogs, dropdowns, cards */
  --radius-lg: 10px;  /* the few genuinely large surfaces */

  /* ── Shadow ───────────────────────────────────────────────────────────
     Depth comes from the surface ramp and a hairline. A shadow is reserved
     for something that genuinely floats above the page - a dropdown, a
     popover, a dialog - and there is one of them. A soft grey shadow under
     every card is what made the old app look generated. */
  --shadow-soft: 0 1px 2px rgba(0,0,0,0.35), 0 8px 24px rgba(0,0,0,0.35);

  /* ═══ MOTION ═════════════════════════════════════════════════════════
     The transitions.dev scale. Every `transition` and `animation` on the site
     reads from these names - no raw ms, no raw cubic-bezier anywhere. Pick by
     USAGE, not by which number looks close: the comment on each token is the
     rule. The surfaces that consume them live in styles/motion.css.
     ══════════════════════════════════════════════════════════════════════ */

  /* Durations */
  --duration-stagger:   40ms;    /* gap between items in a staggered list */
  --duration-micro:     80ms;    /* press feedback, checkbox, hover on a dense row */
  --duration-quick:     150ms;   /* dropdown close, text swap, tooltip appear */
  --duration-fast:      250ms;   /* modal open, panel reveal, toast in */
  --duration-medium:    350ms;   /* page transition, accordion, drawer */
  --duration-slow:      400ms;   /* large surface settling */
  --duration-very-slow: 500ms;   /* a full-page change */

  /* Easing */
  --ease-smooth-out:    cubic-bezier(0.22, 1, 0.36, 1);     /* things that open */
  --ease-in-out:        ease-in-out;                        /* things that swap */
  --ease-out:           ease-out;                           /* tooltips, hovers */
  --ease-linear:        linear;                             /* spinners, shimmer */
  --ease-bounce:        cubic-bezier(0.34, 1.36, 0.64, 1);  /* a mild overshoot */
  --ease-bounce-strong: cubic-bezier(0.34, 3.85, 0.64, 1);  /* a badge landing */

  /* Distance, scale, blur */
  --distance-micro:  4px;
  --distance-small:  6px;
  --distance-base:   8px;
  --distance-medium: 12px;
  --scale-large:     0.96;
  --scale-medium:    0.97;
  --scale-small:     0.98;
  --blur-small:      2px;
  --blur-medium:     3px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   LIGHT
   ═══════════════════════════════════════════════════════════════════════════
   Near-neutral grey with only a trace of warmth - the same trace the dark
   theme has, so the two are one family rather than a warm room and a cool one.
   --text here is the dark theme's --bg, which is what ties the pair together.

   Amber is text in the light theme as well as a fill (a timecode, a step
   numeral, the current version). Its text value is slightly darker than the
   fill so those marks stand out without changing the button colour.
   ═══════════════════════════════════════════════════════════════════════════ */

[data-theme="light"] {
  --bg:             #eceae7;
  --bg-2:           #e3e1dd;
  --surface:        #f7f6f4;
  --surface-2:      #eae8e5;
  --surface-raised: #ffffff;

  /* Brighter than --surface here, not darker: see the note in :root. */
  --field:          #ffffff;

  --border:         #c6c3be;
  --border-soft:    #dbd8d4;

  --text:           #1b1a19;
  --text-dim:       #55524d;
  --text-muted:     #67645e;

  /* Keep text and fine marks darker than the button fill. This modest step
     raises amber from 2.1:1 to 3.0:1 on the page; it still falls short of the
     4.5:1 contrast target for normal-size text. --accent-fill keeps the
     brighter brand amber, with near-black --accent-on text. */
  --accent:         #b97830;
  --accent-fill:    #d3974e;
  --accent-hi:      #c68a41;   /* hover: one step deeper, label still 5.9:1 */
  --accent-dim:     #7e4403;
  --accent-on:      #1b1a19;
  --accent-subtle:  rgba(211, 151, 78, 0.18);

  --wave:           #b0ada7;
  --wave-hover:     #46433e;

  /* The same six meanings, darkened to survive a light field at marker size. */
  --status-open:     #256477;
  --status-todo:     #3d5a9e;
  --status-urgent:   #9c3a2f;
  --status-question: #56449b;
  --status-closed:   #137036;
  --status-wontdo:   #64615c;

  --marker-default: #2b6b54;
  --marker-halo:    rgba(255, 255, 255, 0.4);

  --error:          #9c3a2f;
  --success:        #137036;
  --instrument-color: #2b6b54;

  --overlay:        rgba(0, 0, 0, 0.3);
  --modal-shadow:   rgba(0, 0, 0, 0.15);

  --shadow-soft:    0 1px 2px rgba(0,0,0,0.04), 0 10px 28px rgba(0,0,0,0.06);
}