/* ============================================================================
   BRAND / ACCENT is the single source of truth for the app's accent colour.
   Loaded by index.html, setup.html and app.html.

   TO RE-BRAND THE WHOLE APP, EDIT ONLY THE `--brand-*` BLOCK BELOW.
   Nothing anywhere else references a literal accent colour: every button,
   focus ring, badge, gradient, glow and tint in both themes is derived from
   these seven values. Swapping blue for green/orange/violet is a one-block
   change, and both light and dark follow automatically.

   The two knobs
   -------------
     --brand           the accent itself. Used for buttons, focus borders,
                       active states. White text sits on this, so keep it dark
                       enough to stay legible (aim for >= 4.5:1 against white).
     --brand-rgb       the SAME colour as bare "r,g,b" channels. This is what
                       powers every translucent tint in the app, written as
                       rgba(var(--accent-rgb), <alpha>). It must be kept in
                       sync with --brand by hand, because CSS cannot split a hex into
                       channels. If you change one, change the other.

   Every other step below is DERIVED from --brand with color-mix(), so those
   two lines are the whole re-brand. The derived steps are still plain
   variables, so you can pin any one of them to a literal colour if a
   particular hue needs hand-tuning.

   Both themes deliberately share the SAME --brand. Only the "on-light" /
   "on-dark" text steps differ, because those are contrast corrections against
   the surface, not a second brand colour.
   ========================================================================= */
:root{
  /* ---- the brand: EDIT THESE TWO LINES ---------------------------------- */
  /* #0D6EFD is 4.5:1 against white, so it clears WCAG AA for white-on-accent
     buttons and for accent text on white, but only just. If you swap in a
     lighter brand, re-check those two ratios before shipping. */
  --brand:#0D6EFD;
  --brand-rgb:13,110,253;          /* keep in sync with --brand */
  /* ---- end of the brand ------------------------------------------------- */

  /* Derived steps. Mixed in oklab so lightness moves perceptually evenly and
     the hue stays put, so the same percentages work for any brand colour. */
  --brand-pressed:color-mix(in oklab, var(--brand), black 18%);
  --brand-on-light:color-mix(in oklab, var(--brand), black 20%);
  --brand-on-dark:color-mix(in oklab, var(--brand), white 52%);
  --brand-g1:color-mix(in oklab, var(--brand), white 16%);
  --brand-g2:color-mix(in oklab, var(--brand), white 26%);
  --brand-g3:color-mix(in oklab, var(--brand), white 40%);

  /* Everything below maps the brand onto the accent tokens the pages use.
     You should not need to touch these. */
  --accent:var(--brand);
  --accent-2:var(--brand-pressed);
  --accent-soft:var(--brand-on-dark);
  --accent-rgb:var(--brand-rgb);
  --accent-grad:var(--brand-g1);
  --accent-grad-2:var(--brand-g2);
  --accent-grad-3:var(--brand-g3);
}

/* Light theme: same brand, but accent text flips to the darker step so it
   stays legible against white panels. */
:root[data-theme="light"]{
  --accent-soft:var(--brand-on-light);
}