/* ==========================================================================
   RESERVATION HUB SERVICES: BRAND TOKENS
   The single source for colours, gradients, type, buttons, cards, corners and
   readability floors on every RHS web page. Read with Colors_Typography.md.

   Canonical copy:  Company/Brand/rhs-brand-tokens.css   <- edit THIS one
   Website copy:    Systems/Catalyst/ResHub-App/reshub-web/css/rhs-brand-tokens.css
                    (copy it across after an edit, then deploy the site)

   Values were measured from the approved homepage on 2026-09-14 and checked
   against the older VSL1 file (Sales/Offer/Survey VSL Landing Pages/VSL1/
   rhs-brand-colours.css). Tokens and component classes only, no page layout.
   Component classes are prefixed rhs-b- so they never clash with a page's own.
   ========================================================================== */

:root {
  /* ---- Page ground ---- */
  --rhs-bg-base: #08081d;                 /* painted under the gradient so nothing shows white */
  --rhs-bg-page:
    radial-gradient(circle at 72% 28%, rgba(82, 42, 160, 0.11) 0%, rgba(82, 42, 160, 0.05) 18%, rgba(82, 42, 160, 0) 42%),
    radial-gradient(circle at 18% 82%, rgba(0, 145, 255, 0.05) 0%, rgba(0, 145, 255, 0) 26%),
    linear-gradient(135deg, #03050B 0%, #050814 46%, #070B18 100%);
  --rhs-bg-band: rgba(5, 8, 18, 0.55);    /* alternate section band */

  /* ---- Core colours ---- */
  --rhs-pink: #EC27D9;
  --rhs-magenta: #D946EF;
  --rhs-purple: #A855F7;
  --rhs-violet: #7C3AED;
  --rhs-blue: #29B0FF;
  --rhs-royal: #3B82F6;
  --rhs-cyan: #22D3EE;
  --rhs-periwinkle: #7FA5FF;              /* outline-button border */
  --rhs-whatsapp: #25D366;                /* WhatsApp bubble only */
  --rhs-live: #4ADE80;                    /* "live" status dots only */

  /* ---- Text ---- */
  --rhs-text: #FFFFFF;                    /* headings, buttons */
  --rhs-text-body: #E8ECF5;               /* default body */
  --rhs-text-soft: #CDD5E5;               /* secondary body */
  --rhs-text-muted: #AAB1C5;              /* captions, intros */
  --rhs-text-lilac: #D8B4FE;              /* eyebrow labels */

  /* ---- Gradients ---- */
  --rhs-grad-cta: linear-gradient(90deg, #EC27D9 0%, #A855F7 52%, #7C3AED 100%);
  --rhs-grad-text-pink: linear-gradient(90deg, #FF2BD6 0%, #D946EF 45%, #8B5CF6 100%);
  --rhs-grad-text-blue: linear-gradient(90deg, #29B0FF 0%, #3B82F6 100%);
  --rhs-grad-text-brand: linear-gradient(90deg, #D946EF 0%, #8B5CF6 45%, #22D3EE 100%);
  --rhs-grad-text-cyan: linear-gradient(90deg, #3B82F6 0%, #2563EB 35%, #06B6D4 70%, #22D3EE 100%);
  --rhs-grad-trust: linear-gradient(90deg, #14091F 0%, #2A103D 35%, #31124E 60%, #170B25 100%);
  --rhs-grad-trust-narrow: linear-gradient(135deg, #14091F 0%, #2A103D 50%, #170B25 100%);  /* tablet + phone */
  --rhs-grad-card: linear-gradient(135deg, rgba(10, 12, 28, 0.92) 0%, rgba(7, 18, 35, 0.92) 100%);
  --rhs-grad-card-feature: linear-gradient(135deg, rgba(10, 12, 28, 0.98) 0%, rgba(8, 14, 31, 0.98) 55%, rgba(7, 18, 35, 0.98) 100%);

  /* ---- Borders and glows ---- */
  --rhs-border-card: rgba(168, 85, 247, 0.28);
  --rhs-border-card-strong: rgba(168, 85, 247, 0.45);
  --rhs-border-quiet: rgba(127, 165, 255, 0.18);
  --rhs-glow-cta: 0 10px 30px rgba(168, 85, 247, 0.30), 0 0 24px rgba(236, 39, 217, 0.18);
  --rhs-glow-cta-hover: 0 14px 40px rgba(168, 85, 247, 0.42);
  --rhs-glow-outline: 0 0 14px rgba(94, 139, 255, 0.14);
  --rhs-glow-card: 0 0 28px rgba(92, 125, 255, 0.16), 0 0 56px rgba(125, 58, 237, 0.10);

  /* ---- Type (Poppins 400 / 600 / 700 / 800 from Google Fonts) ---- */
  --rhs-font: Poppins, system-ui, -apple-system, "Segoe UI", sans-serif;
  --rhs-body: 17px;                       /* desktop floor; tablet and phone raise it below */
  --rhs-subtext: 15px;                    /* captions, labels you read (never lower) */
  --rhs-cta-size: 19px;
  --rhs-h1: 50px;  --rhs-h2: 48px;

  /* ---- Corners ---- */
  --rhs-radius-button: 14px;
  --rhs-radius-card: 22px;
  --rhs-radius-tile: 18px;
  --rhs-radius-pill: 999px;
}

@media (max-width: 1023px) {              /* tablet */
  :root { --rhs-body: 18px; --rhs-h1: 42px; --rhs-h2: 34px; --rhs-radius-card: 20px; --rhs-radius-tile: 16px; }
}
@media (max-width: 767px) {               /* phone */
  :root { --rhs-body: 19px; --rhs-subtext: 15px; --rhs-h1: 32px; --rhs-h2: 26px;
          --rhs-radius-button: 12px; --rhs-radius-card: 18px; --rhs-radius-tile: 14px; }
}

/* ---- Component classes ---- */
.rhs-b-page { background-color: var(--rhs-bg-base); background: var(--rhs-bg-page); color: var(--rhs-text-body); font-family: var(--rhs-font); }

.rhs-b-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  padding: 18px 32px; border: 0; border-radius: var(--rhs-radius-button);
  background: var(--rhs-grad-cta); color: var(--rhs-text) !important;
  font-family: var(--rhs-font); font-size: var(--rhs-cta-size); font-weight: 700; line-height: 1.2;
  text-decoration: none; box-shadow: var(--rhs-glow-cta); cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.rhs-b-btn:hover { transform: translateY(-2px); box-shadow: var(--rhs-glow-cta-hover); }
/* Outline = the secondary action. Keep its padding 1px smaller than the primary: the difference is deliberate hierarchy. */
.rhs-b-btn--outline {
  padding: 17px 30px; background: rgba(94, 139, 255, 0.06); border: 1.5px solid var(--rhs-periwinkle);
  font-weight: 600; box-shadow: var(--rhs-glow-outline);
}
.rhs-b-btn--outline:hover { background: rgba(94, 139, 255, 0.14); }

.rhs-b-eyebrow {
  display: inline-block; padding: 8px 18px; border-radius: var(--rhs-radius-pill);
  background: rgba(168, 85, 247, 0.16); border: 1px solid rgba(168, 85, 247, 0.32);
  color: var(--rhs-text-lilac); font-size: 11px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase;
}

.rhs-b-card {
  background: var(--rhs-grad-card-feature); border: 1.5px solid var(--rhs-border-card-strong);
  border-radius: var(--rhs-radius-card); box-shadow: var(--rhs-glow-card);
}

.rhs-b-grad-pink, .rhs-b-grad-blue, .rhs-b-grad-brand {
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}
.rhs-b-grad-pink { background-image: var(--rhs-grad-text-pink); }
.rhs-b-grad-blue { background-image: var(--rhs-grad-text-blue); }
.rhs-b-grad-brand { background-image: var(--rhs-grad-text-brand); }