/* HoloBox911 v2 design tokens — from HoloBox911 Brand Guidelines v1.0 (Oct 2026) and 03 Colours/HoloBox911_Colours.txt.
   Shared by Studio (light work surface) and the Phone app (dark motion surface). Use tokens; never hard-code brand hexes elsewhere. */

@font-face { font-family: 'Poppins'; src: url('/brand/v3/fonts/poppins-300.woff2') format('woff2'); font-weight: 300; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('/brand/v3/fonts/poppins-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }

:root {
  /* Brand colours (print/social, from the logo) — accents only, never large flat fills behind text */
  --hb-cyan: #18E8F8; --hb-blue: #00A8E8; --hb-blue-deep: #005A9E; --hb-purple: #7B2A90;
  --hb-magenta: #EC008C; --hb-yellow: #FFD000; --hb-orange: #F29100; --hb-green: #8DC63F;

  /* Motion palette (glows on dark backgrounds) */
  --hm-cyan: #40D6FF; --hm-blue: #2882FF; --hm-purple: #8232DC; --hm-magenta: #F03CAA; --hm-orange: #FFAA28; --hm-green: #78D746;

  /* Neutrals: white and Ink carry most of the layout */
  --hb-ink: #0F1222; --hb-slate: #4A5068; --hb-mist: #F5F7FB; --hb-line: #E6E8EF; --hb-white: #FFFFFF;

  /* Gradients (always in logo order) */
  --hb-spectrum: linear-gradient(90deg, #18E8F8, #00A8E8, #7B2A90, #EC008C, #FFD000, #8DC63F);
  --hb-headline: linear-gradient(90deg, #EC008C, #7B2A90, #00A8E8);   /* the ONE call to action per screen; one highlighted word */
  --hb-cta-fill: linear-gradient(90deg, #C8007A, #7B2A90, #005A9E);   /* button fill under white text: same brand hues, deepened so every point is at least 5.6:1 (WCAG AA) */
  --hb-motion-text: linear-gradient(90deg, #40D6FF, #F03CAA, #FFAA28);
  --hb-cool: linear-gradient(90deg, #00B4D8, #00A8E8, #005A9E, #7B2A90);
  --hb-warm: linear-gradient(90deg, #EC008C, #E0306A, #F29100, #5FA81E);
  --hb-night: linear-gradient(135deg, #2C1060 0%, #120A3A 55%, #0A2264 100%); /* motion background */

  /* Type: Poppins. Headings SemiBold 600, body Regular 400 at 1.5 in Slate, labels SemiBold caps wide tracking */
  --hb-font: 'Poppins', system-ui, sans-serif;
  --hb-label-track: .2em;

  /* Shape: fully rounded pills; soft cards */
  --hb-pill: 999px; --hb-radius: 16px; --hb-radius-sm: 12px;

  /* Status (with words, never colour alone) */
  --hb-ok: #12804A; --hb-ok-bg: #E6F6EC; --hb-warn: #9A5B00; --hb-warn-bg: #FFF4E0; --hb-bad: #C4304A; --hb-bad-bg: #FDECEF;
}

/* Reusable brand pieces */
.hb-spectrum-bar { height: 4px; background: var(--hb-spectrum); }
.hb-grad-word { background: var(--hb-headline); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hb-label { font-weight: 600; font-size: 12px; letter-spacing: var(--hb-label-track); text-transform: uppercase; color: var(--hb-slate); }
.hb-cta { background: var(--hb-cta-fill); color: #fff; border: 0; border-radius: var(--hb-pill); font-weight: 600; letter-spacing: .02em; }
.hb-pill-dark { background: var(--hb-ink); color: #fff; border-radius: var(--hb-pill); }
.hb-pill-light { background: var(--hb-mist); color: var(--hb-ink); border: 1px solid var(--hb-line); border-radius: var(--hb-pill); }
.hb-streaks { position: absolute; pointer-events: none; } /* 45° rounded bars rising left to right, bleeding off a corner */