/* ══════════════════════════════════════════════════════════════════════════
   ACCENT PALETTE — the single source of truth for the brand colour.

   Change these values and every button, price, focus ring, chip, tinted panel
   and card gradient across the customer portal changes with them. This is the
   whole "blue -> orange / green / red" knob for a reseller.

   It lives in its OWN file because the order page is self-contained and does
   not load portal.css. Duplicating the values in two files would mean a swap
   that half-worked — which is exactly what happened on 2026-08-30: the order
   page referenced var(--accent) without ever loading the file that defined it,
   so its card headers lost their blue while the literal green/purple trial and
   bundle gradients survived.

   The -rgb pairs exist because rgba() cannot be built from a hex custom
   property. They are the SAME colours as --accent / --accent-soft.
   ══════════════════════════════════════════════════════════════════════════ */
:root {
    --accent: #2563eb;
    --accent-rgb: 37, 99, 235;
    --accent-hover: #1d4ed8;
    --accent-soft: #3b82f6;          /* focus rings, active borders */
    --accent-soft-rgb: 59, 130, 246;
    --accent-bright: #60a5fa;        /* the accent ON DARK backgrounds */
    --accent-light: #dbeafe;         /* chip backgrounds */
    --accent-bg: #eff6ff;            /* tinted panels */
}

/* Only the two tints that sat on white are re-cut for dark; the hue itself is
   deliberately unchanged, so a reseller on orange gets orange in BOTH themes. */
html[data-theme="dark"] {
    --accent-light: #1e2a45;
    --accent-bg:    #131c2e;
}