/* Brand palette utilities — extracted from layout/_brand_palette.j2
   (2026-08-03). The palette itself stays runtime CSS variables
   (--brand-primary/-accent/-dark, defaulted here, overridden per client
   by page-template.j2); these are the hand-written brand-* utilities
   Tailwind's CDN build cannot generate for var() colours. */
    :root {
      /* Defaults — overridden by page-template.j2 with client branding */
      --brand-primary: #D6236E;
      --brand-accent: #01C1D6;
      --brand-dark: #0C4767;
      /* Legacy aliases */
      --primary-pink: var(--brand-primary);
      --primary-cyan: var(--brand-accent);
      --primary-purple: #210056;
      --neutral-dark: #191919;
    }
    .text-pink { color: var(--brand-primary); }
    .text-primary { color: var(--primary-purple); }
    .bg-primary { background-color: var(--brand-primary); }
    .hover\:bg-cyan:hover { background-color: var(--brand-accent); }

    /* Brand color utilities — replace hardcoded Tailwind arbitrary values */
    .text-brand           { color: var(--brand-primary); }
    .text-brand-accent    { color: var(--brand-accent); }
    .text-brand-dark      { color: var(--brand-dark); }
    .bg-brand             { background-color: var(--brand-primary); }
    .bg-brand-accent      { background-color: var(--brand-accent); }
    .bg-brand-dark        { background-color: var(--brand-dark); }
    .border-brand         { border-color: var(--brand-primary); }
    .border-brand-accent  { border-color: var(--brand-accent); }
    .border-brand-dark    { border-color: var(--brand-dark); }
    /* Opacity variants */
    .bg-brand\/5          { background-color: color-mix(in srgb, var(--brand-primary) 5%, transparent); }
    .bg-brand\/10         { background-color: color-mix(in srgb, var(--brand-primary) 10%, transparent); }
    .bg-brand\/20         { background-color: color-mix(in srgb, var(--brand-primary) 20%, transparent); }
    .bg-brand\/30         { background-color: color-mix(in srgb, var(--brand-primary) 30%, transparent); }
    .bg-brand-accent\/5   { background-color: color-mix(in srgb, var(--brand-accent) 5%, transparent); }
    .bg-brand-accent\/10  { background-color: color-mix(in srgb, var(--brand-accent) 10%, transparent); }
    .bg-brand-accent\/20  { background-color: color-mix(in srgb, var(--brand-accent) 20%, transparent); }
    .bg-brand-accent\/30  { background-color: color-mix(in srgb, var(--brand-accent) 30%, transparent); }
    .bg-brand-dark\/5     { background-color: color-mix(in srgb, var(--brand-dark) 5%, transparent); }
    .bg-brand-dark\/10    { background-color: color-mix(in srgb, var(--brand-dark) 10%, transparent); }
    /* Opaque tints for position:sticky cells. A translucent tint on a sticky
       cell lets the columns scrolling underneath show through it — the
       crosstabs banner-group column bled numbers on horizontal scroll. */
    .bg-brand-dark-tint   { background-color: color-mix(in srgb, var(--brand-dark) 5%, white); }
    .bg-brand-accent-tint { background-color: color-mix(in srgb, var(--brand-accent) 5%, white); }
    .border-brand\/20     { border-color: color-mix(in srgb, var(--brand-primary) 20%, transparent); }
    .border-brand\/30     { border-color: color-mix(in srgb, var(--brand-primary) 30%, transparent); }
    .border-brand-accent\/20 { border-color: color-mix(in srgb, var(--brand-accent) 20%, transparent); }
    .border-brand-accent\/30 { border-color: color-mix(in srgb, var(--brand-accent) 30%, transparent); }
    .shadow-brand\/30     { box-shadow: 0 4px 6px -1px color-mix(in srgb, var(--brand-primary) 30%, transparent); }
    /* Hover variants */
    .hover\:bg-brand:hover       { background-color: var(--brand-primary); }
    .hover\:bg-brand-accent:hover { background-color: var(--brand-accent); }
    .hover\:bg-brand\/5:hover    { background-color: color-mix(in srgb, var(--brand-primary) 5%, transparent); }
    .hover\:bg-brand-accent\/5:hover { background-color: color-mix(in srgb, var(--brand-accent) 5%, transparent); }
    .hover\:text-brand:hover     { color: var(--brand-primary); }
    .hover\:text-brand-accent:hover { color: var(--brand-accent); }
    .hover\:text-brand-dark:hover { color: var(--brand-dark); }
    .hover\:border-brand-accent\/50:hover { border-color: color-mix(in srgb, var(--brand-accent) 50%, transparent); }
    /* Focus ring variants */
    .focus\:ring-brand:focus           { --tw-ring-color: var(--brand-primary); }
    .focus\:ring-brand\/20:focus       { --tw-ring-color: color-mix(in srgb, var(--brand-primary) 20%, transparent); }
    .focus\:ring-brand\/30:focus       { --tw-ring-color: color-mix(in srgb, var(--brand-primary) 30%, transparent); }
    .focus\:ring-brand-accent:focus    { --tw-ring-color: var(--brand-accent); }
    .focus\:ring-brand-accent\/10:focus { --tw-ring-color: color-mix(in srgb, var(--brand-accent) 10%, transparent); }
    .focus\:ring-brand-accent\/20:focus { --tw-ring-color: color-mix(in srgb, var(--brand-accent) 20%, transparent); }
    .focus\:ring-brand-accent\/30:focus { --tw-ring-color: color-mix(in srgb, var(--brand-accent) 30%, transparent); }
    .focus\:ring-brand-accent\/50:focus { --tw-ring-color: color-mix(in srgb, var(--brand-accent) 50%, transparent); }
    .focus\:border-brand:focus         { border-color: var(--brand-primary); }
    .focus\:border-brand-accent:focus  { border-color: var(--brand-accent); }
    /* Shadow variants */
    .shadow-brand-accent\/30  { box-shadow: 0 4px 6px -1px color-mix(in srgb, var(--brand-accent) 30%, transparent); }
    .shadow-brand-accent\/40  { box-shadow: 0 4px 6px -1px color-mix(in srgb, var(--brand-accent) 40%, transparent); }

    /* Every utility below is used by a page that has NO other source of brand
       CSS — the public share and login pages, and the floating page controls.
       An opacity modifier on a `var()` colour is the specific thing Tailwind's
       CDN build cannot generate, so anything not written out here silently
       renders as no style at all. */
    .ring-brand           { --tw-ring-color: var(--brand-primary); }
    .text-brand\/50       { color: color-mix(in srgb, var(--brand-primary) 50%, transparent); }
    .text-brand\/70       { color: color-mix(in srgb, var(--brand-primary) 70%, transparent); }
    .border-brand\/25     { border-color: color-mix(in srgb, var(--brand-primary) 25%, transparent); }
    .border-brand-dark\/20 { border-color: color-mix(in srgb, var(--brand-dark) 20%, transparent); }
    .hover\:bg-brand\/10:hover      { background-color: color-mix(in srgb, var(--brand-primary) 10%, transparent); }
    .hover\:bg-brand-dark\/10:hover { background-color: color-mix(in srgb, var(--brand-dark) 10%, transparent); }
    .hover\:bg-brand-dark\/20:hover { background-color: color-mix(in srgb, var(--brand-dark) 20%, transparent); }
    /* The floating "Go to" pill darkens on hover rather than fading. Its old
       `hover:bg-brand-accent/80` was undefined, so on the app pages hovering
       did nothing — and on the share page, where NO brand utility resolved,
       the only rule that worked was a hover, leaving the button invisible
       until the pointer touched it. */
    .hover\:bg-brand-accent-dark:hover { background-color: color-mix(in srgb, var(--brand-accent) 85%, #000); }
    .hover\:bg-brand-dark-dark:hover   { background-color: color-mix(in srgb, var(--brand-primary) 85%, #000); }