/* PyraTime Sq9 — app-local tokens.
 *
 * Everything shared (surfaces, text, the brass accent, steel blue for
 * levels, type, space, radius, motion) comes from css/pt-tokens.css, a
 * verbatim copy of pyratime-studio's web/app/tokens.css. Don't edit that
 * file here; copy it again when Studio bumps --pt-tokens-version.
 *
 * This file holds only what the shared file doesn't: the data hues the
 * wheel uses to tell aspects, pins and energy apart, and the wheel's
 * layout invariants. No glows: the *-glow names stay so existing rules
 * resolve, but they are transparent.
 */

:root {
  /* ---- Geometry layout invariants ----
   * `--ring-surround` is the ratio of rings-svg pixel size to the
   * canvas-content (= grid) pixel size. It works hand-in-hand with
   * rings.js's `FRAC.GRID`. The geometric invariant is
   *
   *   FRAC.GRID × --ring-surround = √2 / 2 ≈ 0.7071
   *
   * which keeps the grid's corners tangent to the wheel's inner ring.
   * geometry.js reads this same value (via getPropertyValue) so the JS
   * fit() math stays in sync. Tune the two together. */
  --ring-surround: 1.8;
  --ring-surround-offset: -40%;   /* = -(surround - 1) / 2 × 100% */

  /* Soft fills of the two accents, for selected rows and active pills. */
  --sq9-accent-soft:   rgba(199, 154, 82, 0.14);
  --sq9-accent-2-soft: rgba(143, 169, 184, 0.14);
  --sq9-glow:          transparent;

  /* Data hues: pins, aspects, energy. Never buttons. */
  --sq9-violet:        #b4a3d6;
  --sq9-violet-soft:   rgba(180, 163, 214, 0.06);
  --sq9-violet-medium: rgba(180, 163, 214, 0.16);
  --sq9-amber:         #e0a458;
  --sq9-amber-soft:    rgba(224, 164, 88, 0.14);
  --sq9-rose:          #e07a8f;
  --sq9-rose-soft:     rgba(224, 122, 143, 0.12);
  --sq9-slate:         #a0a8b8;
  --sq9-slate-soft:    rgba(160, 168, 184, 0.10);
  --sq9-up-soft:       rgba(127, 212, 168, 0.12);
  --sq9-down-soft:     rgba(240, 138, 122, 0.12);

  /* Chrome dimensions Studio's file doesn't name. */
  --sq9-sidebar-w:       220px;
  --sq9-statusstrip-h:    30px;
}

:root[data-theme="light"] {
  --sq9-accent-soft:   rgba(138, 100, 32, 0.10);
  --sq9-accent-2-soft: rgba(62, 90, 107, 0.10);

  --sq9-violet:        #5a3fb0;
  --sq9-violet-soft:   rgba(90, 63, 176, 0.04);
  --sq9-violet-medium: rgba(90, 63, 176, 0.14);
  --sq9-amber:         #9a5b0c;
  --sq9-amber-soft:    rgba(154, 91, 12, 0.12);
  --sq9-rose:          #b03e62;
  --sq9-rose-soft:     rgba(176, 62, 98, 0.10);
  --sq9-slate:         #5f6673;
  --sq9-slate-soft:    rgba(95, 102, 115, 0.10);
  --sq9-up-soft:       rgba(23, 117, 72, 0.10);
  --sq9-down-soft:     rgba(178, 58, 42, 0.10);
}

/* --- Color-vision-deficiency (CVD) friendly palette ---
 * Accessibility → Color-blind mode applies Okabe-Ito overrides on top of
 * either theme. Violet becomes vermillion and rose reddish-purple, which
 * stay distinct from each other and from the steel-blue levels for every
 * CVD type. Hardcoded aspect-web colours are remapped in css/geometry.css
 * under the same selector. */
html[data-cvd="on"] {
  --sq9-violet:        #D55E00;   /* Okabe-Ito vermillion */
  --sq9-violet-soft:   rgba(213, 94, 0, 0.10);
  --sq9-violet-medium: rgba(213, 94, 0, 0.20);

  --sq9-rose:          #CC79A7;   /* Okabe-Ito reddish-purple */
  --sq9-rose-soft:     rgba(204, 121, 167, 0.12);

  --sq9-slate:         #999999;
  --sq9-slate-soft:    rgba(153, 153, 153, 0.10);
}