/* ============================================================
   THE ACCENT — Zuno purple, in one place. Every page loads this (the
   website and the note editor), before theme.js, which reads these
   values: when someone picks their own color (Account → Your color),
   theme.js works out every shade below from it, for light and dark,
   kept readable, and lays it over these. Change the purple here and it
   changes everywhere, custom colors included.

     --accent          buttons, filled things (white text 6:1)
     --accent-hover    …hovered
     --accent-pressed  …pressed
     --accent-text     links, active tab, focus ring (4.5:1 on the page)
     --accent-subtle   selected rows, text selection
     --on-accent       text and ticks on --accent
     --focus           the keyboard focus ring

   THE GRADIENT — Zuno's orange → pink → purple (the logo, highlights,
   the featured plan, badges), here too, as its three stops; --grad is
   it, at 135°, and --on-grad is the text that reads on it. It follows
   the accent: theme.js turns all three stops by the same hue as someone's
   color (the other way round the wheel if one way passes through muddy
   olive), so every color gets a gradient of its own that ends in it,
   and Zuno purple's is exactly this one.

     --grad-a  --grad-b  --grad-c    its stops (c is the accent's own hue)
     --grad                          linear-gradient(135deg, a, b 50%, c)
     --on-grad                       text on it (white, or ink when the stops are light)
============================================================ */
:root{
  --zuno-purple:#7a2cf5;      /* the color itself (the "Zuno purple" swatch shows it, whatever color is on) */
  --accent:var(--zuno-purple);
  --accent-hover:#6a1fe0;
  --accent-pressed:#5518b8;
  --accent-text:#6a1fe0;
  --accent-subtle:#efe6ff;
  --on-accent:#ffffff;
  --focus:var(--accent-text);
  --grad-a:#ff7a1a;
  --grad-b:#f0245e;
  --grad-c:#7a2cf5;
  --on-grad:#ffffff;
  --grad:linear-gradient(135deg, var(--grad-a) 0%, var(--grad-b) 50%, var(--grad-c) 100%);
}
:root[data-theme="dark"]{
  --accent:#8b47ff;
  --accent-hover:#7a35f0;
  --accent-pressed:#6620d9;
  --accent-text:#b893ff;
  --accent-subtle:#2a1b49;
  --on-accent:#ffffff;
}