/* =====================================================================
   HeyaBud — Brand tokens (SINGLE SOURCE OF TRUTH)
   Extracted from Figma: "HeyaBud.ai Branding" → "Choose Your Plan" frame
   (file Hj33H7hDiQ3OAc4Z64Foze, node 272:1172).
   Import this on every web surface (app shell, website, promo pages).
   Change a value HERE and every surface follows — keeps web in lockstep
   with the Figma + Unreal UI.
   ===================================================================== */
:root{
  /* ---- Core palette (exact Figma hex) ---- */
  --hb-bg:         #212221;   /* dark base — default page surface (bible) */
  --hb-cyan:       #1AB3B2;   /* PRIMARY brand cyan — logo ring, primary buttons */
  --hb-cyan-deep:  #0091B0;   /* secondary cyan — gradient depth, hover states */
  --hb-magenta:    #CF39E8;   /* magenta accent — featured tier / emphasis ONLY */
  --hb-purple:     #6917A8;   /* deep purple — backgrounds, gradients, atmosphere */
  --hb-teal-deep:  #11302F;   /* card-gradient base (cyan-tinted dark) */
  --hb-ink:        #FFFFFF;   /* white — emphasis text */
  --hb-body:       #DEDAD5;   /* cream — body copy (bible) */
  --hb-muted:      #5E5E5E;   /* mid-gray — tertiary text */
  --hb-line:       #5E5E5E;   /* hairline borders */
  --hb-panel:      #2A2B2A;   /* lifted surface / inputs */

  /* ---- Accent fills / gradients ---- */
  --hb-fill-cyan:    linear-gradient(to bottom, rgba(26,179,178,.16), rgba(33,34,33,.25));
  --hb-fill-magenta: linear-gradient(to bottom, rgba(207,57,232,.16), rgba(105,23,168,.18));
  --hb-cta:          linear-gradient(90deg, #1AB3B2, #00C2C0);

  /* ---- Type (Inter Tight for display, Inter for body — bible) ---- */
  --hb-display: 'Inter Tight', 'Inter', system-ui, sans-serif;
  --hb-font: 'Inter', system-ui, -apple-system, Segoe UI, sans-serif;
  --hb-w-regular: 400; --hb-w-medium: 500; --hb-w-semibold: 600;
  --hb-fs-h1: 30px;  --hb-fs-price: 40px; --hb-fs-plan: 24px;
  --hb-fs-cta: 25px; --hb-fs-body: 16px;  --hb-fs-small: 12px;

  /* ---- Radii ---- */
  --hb-r-card: 8px; --hb-r-pill: 25px; --hb-r-input: 12px;

  /* ---- Glow ---- */
  --hb-glow-cyan:    0 0 22px rgba(26,179,178,.40);
  --hb-glow-magenta: 0 0 22px rgba(207,57,232,.35);
}

/* ---- Reusable brand primitives ---- */
.hb-body   { background:var(--hb-bg); color:var(--hb-ink); font-family:var(--hb-font);
             -webkit-font-smoothing:antialiased; }
.hb-h1     { font-weight:var(--hb-w-semibold); font-size:var(--hb-fs-h1); margin:0; }
.hb-muted  { color:var(--hb-muted); }
.hb-accent-cyan    { color:var(--hb-cyan); }
.hb-accent-magenta { color:var(--hb-magenta); }

.hb-card   { border-radius:var(--hb-r-card); border:1px solid var(--hb-cyan);
             background:var(--hb-fill-cyan); }
.hb-card--magenta { border-color:var(--hb-magenta); background:var(--hb-fill-magenta); }

.hb-btn    { font-family:var(--hb-font); font-weight:var(--hb-w-semibold); font-size:var(--hb-fs-cta);
             color:#000; background:var(--hb-cta); border:2px solid var(--hb-cyan-deep);
             border-radius:var(--hb-r-pill); cursor:pointer; }
.hb-btn--ghost { background:transparent; color:var(--hb-muted); border:1px solid var(--hb-line);
                 font-weight:var(--hb-w-medium); }

.hb-pill   { display:inline-block; border-radius:var(--hb-r-pill); border:1px solid var(--hb-magenta);
             color:var(--hb-magenta); font-size:var(--hb-fs-small); font-weight:var(--hb-w-semibold);
             padding:3px 12px; }

.hb-input  { font-family:var(--hb-font); font-size:var(--hb-fs-body); color:var(--hb-ink);
             background:var(--hb-panel); border:1px solid var(--hb-line);
             border-radius:var(--hb-r-input); }
.hb-input:focus { border-color:var(--hb-cyan); outline:none; box-shadow:0 0 0 2px rgba(0,210,218,.25); }