/* inbetween: one product with the homepage (concepts/home/home.css is the source of truth).
   A white page, ink type, hairlines, one accent: pink, for the main action, a selected state, a keyframe and
   the focus ring. Geist only. Motion graphics are always shown in dark 16:9 frames sitting on the white page.
   The only yellow in the app is the small name tag on Opus 5.5's cursor. */
:root {
  color-scheme: light;

  /* ---- page and surfaces */
  --bg: #ffffff;
  --soft: #f5f5f7;        /* soft fill: the editor's stage area, wells, segmented tracks */
  --line: #e8e8ec;        /* hairlines, separators */
  --line-2: #e4e4e7;      /* control borders (the homepage bar) */
  --line-3: #d9d9df;      /* outline buttons, a hovered control */
  --tick: #d4d4da;        /* timeline ruler ticks */

  /* ---- text */
  --ink: #0b0b0c;
  --ink-2: #5f5f67;
  --ink-3: #8b8b93;

  /* ---- the one accent */
  --pink: #ff3d8b;
  --pink-hover: #ff5a9d;
  --pink-ink: #ffffff;
  --pink-soft: rgba(255, 61, 139, .07);   /* a selected card's tint */
  --pink-ring: rgba(255, 61, 139, .16);   /* focus ring halo */
  --pink-fill: rgba(255, 61, 139, .12);   /* the played part of a clip */

  /* ---- motion graphics frames */
  --frame: #05080f;
  --frame-r: 14px;
  --frame-shadow: 0 30px 70px -34px rgba(10, 20, 45, .5), 0 2px 8px rgba(10, 20, 45, .08);
  --frame-shadow-sm: 0 18px 40px -26px rgba(10, 20, 45, .55), 0 1px 3px rgba(10, 20, 45, .08);

  /* ---- Opus 5.5 (its cursor tag only) and errors */
  --opus: #ffc940;
  --err: #e5484d;

  /* older names still read by scripts: edit.js takes the onion-skin colors from --flux and --cue */
  --cue: #ff3d8b;
  --flux: #3ccf9a;

  /* ---- type */
  --font: 'Geist', ui-sans-serif, system-ui, sans-serif;

  /* ---- shape, shadow, motion */
  --r-control: 10px;
  --r-bar: 18px;
  --shadow-bar: 0 1px 2px rgba(15, 15, 30, .04), 0 12px 32px -14px rgba(15, 15, 30, .18);
  --shadow-pop: 0 1px 2px rgba(15, 15, 30, .05), 0 10px 28px -12px rgba(15, 15, 30, .22);
  --bar-h: 64px;
  --ease: cubic-bezier(.2, .7, .1, 1);
  --ease-io: cubic-bezier(.6, 0, .3, 1);
  --dur-fast: .15s;
  --dur: .25s;
}