/* ============================================================
   R B Export & Import — Shared Design Tokens + UI
   Single source of truth for index.html, product.html,
   documents.html and every page inside /products/.
   Beginner note: change a colour here and it updates
   everywhere automatically. No need to edit each page.

   NOTE: the site uses one fixed brand palette (dark). There is
   no colour-theme switcher any more, so no [data-theme] rules
   and no light-theme overrides live in this file.
   ============================================================ */

/* ---------- Fonts + motion ---------- */
:root {
  --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system,
    'Segoe UI', Roboto, Arial, sans-serif;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
}

/* ---------- Brand palette (fixed) ---------- */
:root {
  --bg: #0B1120;
  --bg-deep: #020617;
  --text: #F1F5F9;
  --text-2: #CBD5E1;
  --text-3: #94A3B8;
  --text-4: #64748B;
  --line: rgba(148, 163, 184, .16);
  --card: #111827;
  --card-2: #0F172A;
  --card-60: rgba(17, 24, 39, .6);
  --card-trans: rgba(17, 24, 39, .55);
  --glass: rgba(2, 6, 23, .82);
  --glass-strong: rgba(11, 17, 32, .9);
  --accent: #F59E0B;
  --accent-2: #FCD34D;
  --accent-ink: #0B1120;
  --accent-fill: linear-gradient(135deg, #D97706, #F59E0B);
  --brand-ink: #60A5E8;
  --bd-amber-600-30: rgba(217, 119, 6, .3);
  --panel-700-50: rgba(30, 41, 59, .5);
  --tint-navy-2: rgba(26, 74, 122, .18);
  --scroll-track: #020617;
  --scroll-thumb: #334155;
  color-scheme: dark;
}

/* ---------- Floating WhatsApp shortcut ----------
   Same look as the .wa-fab used on every page of /products
   (defined in product-page.css) — kept identical so the button is
   consistent site-wide: 54px WhatsApp-green circle with a glow and the
   official WhatsApp glyph. */
.wa-fab {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #25D366;
  box-shadow: 0 14px 32px rgba(37, 211, 102, .35);
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
}

.wa-fab:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 18px 40px rgba(37, 211, 102, .45); }

.wa-fab svg { width: 26px; height: 26px; fill: #fff; }

/* Sticky-nav shadow (toggled by base.js on scroll) */
#navbar.scrolled { box-shadow: 0 10px 30px rgba(0, 0, 0, .28); }