/* ============================================================
   BULBVPN — design tokens
   Colors / type / radii / spacing extracted 1:1 from the Figma
   "Мы предлагаем" frames (desktop 518:214, tablet 821:38, phone 854:592).
   ============================================================ */
:root {
  /* ---- color ---- */
  --c-white:   #ffffff;
  --c-page:    #ffffff;      /* page background */
  --c-black:   #000000;      /* card fill */
  --c-ink:     #090909;      /* logo pill / buy button fill */
  --c-text-dark:  #000000;   /* text on white */
  --c-text-light: #ffffff;   /* text on black */

  --c-purple:  #c547ff;      /* brand accent / card border */
  --c-cyan:    #51dcff;      /* gradient mid */
  --c-violet:  #b921ff;      /* gradient end */

  /* stat gradient "50+": bottom -> top  (#c547ff -> #51dcff -> #b921ff) */
  --grad-stat: linear-gradient(0deg, #c547ff 0%, #51dcff 50%, #b921ff 100%);
  /* phone hamburger gradient */
  --grad-menu: linear-gradient(-86.13deg, #c547ff 0.34%, #51dcff 49.99%, #b921ff 99.64%);

  /* dark-photo overlay used inside the masked decorative backdrops */
  --overlay-65: rgba(0, 0, 0, 0.65);
  --overlay-12: rgba(0, 0, 0, 0.12);

  /* ---- type families ---- */
  /* DM Sans on Google Fonts has NO Cyrillic; Inter (self-hosted, has Cyrillic)
     is the Cyrillic companion in the heading stack. Latin glyphs (VPN, Bulb,
     Wi-Fi) use DM Sans, Cyrillic falls through to Inter. */
  --font-heading: "DM Sans", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* ---- weights ---- */
  --w-medium: 500;
  --w-bold: 700;
  --w-extrabold: 800;
  --w-black: 900;
  --w-regular: 400;

  /* ---- radii ---- */
  --r-card:    42px;  /* desktop/tablet black cards */
  --r-card-md: 35px;  /* footer info / OS bars (desktop+tablet) */
  --r-card-sm: 25px;  /* phone cards */
  --r-btn:     26px;  /* buy button */
  --r-pill:    21px;  /* nav pills */

  /* ---- tracking ---- */
  --ls-sub: 0.72px;   /* section sub-headings */
  --ls-pill: 0.42px;  /* nav pills / buttons */
}