/* BeefyDan portfolio - design tokens. Owner: F0.
   Exactly four colors plus the lattice's unlit tone (spec §3). The black page
   is the default; html[data-polarity="white"] inverts ground/ink/cell only.
   Red never changes: it is the one accent (live, current, active). */

:root {
  /* palette - black page */
  --ground: #0B0B0C;
  --ink: #F2F2F0;
  --gray: #8A8A8A;
  --cell: #2A2A2C;
  --red: #E0312E;
  --hairline: rgb(138 138 138 / 0.4);
  /* THE SITE'S DIM TONE, derived once. Everything that is text but is not a
     reading takes this: the bar's clock, twin switch, arrow and "PLAYING NOW —"
     label, the stage's descriptor, the showcase's meta and pager tail. It is
     --gray as-is on the black page (5.7:1 on --ground) and --gray pulled a
     quarter of the way to --ink on the white one (#6A6A6A, 4.83:1 - raw --gray
     is 3.08:1 there and fails text as a fifth-colour-free way of being
     illegible). It was derived in THREE files and two of the three claimed to
     be quoting the third: header.css mixed 68/32 while stage.css and
     showcase.css mixed 75/25, so the white page carried two different greys
     (#616161 and #6A6A6A) for one role and the comments in both said they
     matched. One token now; --gray itself stays the hairline tone. */
  --dim: var(--gray);

  /* lattice geometry - pitch 8 desktop / 6 mobile, cell 4 (spec §3) */
  --pitch: 8px;
  --cell-size: 4px;

  /* type - three roles */
  --font-voice: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --font-readout: "Fragment Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --fs-12: 12px;
  --fs-14: 14px;
  --fs-18: 18px;
  --fs-28: 28px;
  --fs-44: 44px;
  --fs-72: 72px;
  --track-readout: 0.08em;
  --track-voice: -0.01em;
  --measure: 65ch;

  /* spacing - 4px base */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --gutter: var(--s-4);

  /* structure */
  --bar-h: 48px;
  --band-h: 30svh;
  --card-h: calc(var(--band-h) - 1px); /* the band's top hairline is inside the 30svh */
  --caption-h: 24px;
  --statement-max: 0.8; /* the lit statement may take 80% of the stage width */

  /* z-layers. --z-showcase is scoped INSIDE the stage (the frame is a child of
     it), so on its own it can only order the stage's contents; what puts an
     open piece over the band is --z-stage-open, the stage's own z while a piece
     is up. It sits above the band and below the bar, deliberately: the piece
     covers the work strip, the instrument row stays on top of both. */
  --z-stage: 1;
  --z-band: 2;
  --z-stage-open: 5;
  --z-bar: 10;
  --z-showcase: 20;
  --z-reveal: 30;

  /* motion (spec §5) - P7 motion.css may refine, never rename */
  --dur-micro: 150ms;
  --dur-reveal: 700ms;
  --dur-reveal-mobile: 450ms;
  --dur-condense: 900ms;
  --dur-flip: 1200ms;
  --dur-knob: 240ms; /* the landing's switch knob: one slide, one change of corner */
  --ease: cubic-bezier(.2, .8, .2, 1);
  --ease-settle: cubic-bezier(.3, 1.25, .4, 1); /* one damped overshoot */
  --drift-speed: 22; /* px per second, sign set by data-direction */

  /* scroll state written by app.js: 0 = band hidden, 1 = band fully revealed */
  --reveal: 0;
}

html[data-polarity="black"] {
  color-scheme: dark;
}

html[data-polarity="white"] {
  --ground: #F2F2F0;
  --ink: #0B0B0C;
  --cell: #DCDCD9;
  --dim: color-mix(in srgb, var(--gray) 75%, var(--ink));
  color-scheme: light;
}

@media (max-width: 767px) {
  :root {
    --pitch: 6px;
  }
}