/* ==========================================================================
   Beelooo — Design Tokens
   A disciplined black/white system. No accent color. Depth comes from
   type weight, spacing, and the Apple neutral gray ramp, not color.
   ========================================================================== */

/* ==========================================================================
   Beelooo — Design Tokens
   Black/white system with a deliberate blue glow accent reserved for the
   hero. Depth elsewhere comes from type weight, spacing, and gray.
   Font: Inter, via Google Fonts CDN (see the <link> tags in <head>).
   ========================================================================== */

:root {
  /* ---- Core palette ---- */
  --black: #000000;
  --white: #ffffff;
  --ink: #1d1d1f;
  --ink-soft: #424245;
  --mist: #86868b;
  --fog: #f5f5f7;
  --fog-deep: #e8e8ed;
  --hairline: #d2d2d7;
  --hairline-on-dark: rgba(255, 255, 255, 0.16);
  --ink-on-dark: #f5f5f7;
  --mist-on-dark: #a1a1a6;

  /* ---- Accent: reserved for the hero glow and small highlight moments ---- */
  --glow-blue: #5b8def;
  --glow-blue-soft: rgba(91, 141, 239, 0.35);
  --glow-purple: #9b7bf0;
  --glow-pink: #f083b0;

  /* ---- Type ---- */
  --font-display: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-text: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --text-eyebrow: 0.9375rem;
  --text-body: 1.0625rem;
  --text-body-large: 1.375rem;
  --text-h3: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  --text-h2: clamp(2.125rem, 1.6rem + 2.3vw, 3.5rem);
  --text-h1: clamp(3rem, 1.9rem + 4.6vw, 6.25rem);

  --weight-hero: 800;
  --weight-heading: 700;
  --weight-medium: 500;

  --leading-tight: 1.03;
  --leading-snug: 1.18;
  --leading-normal: 1.47;

  /* ---- Layout ---- */
  --container: 1120px;
  --container-narrow: 760px;
  --gutter: clamp(20px, 5vw, 48px);
  --radius-sm: 14px;
  --radius-md: 20px;
  --radius-lg: 28px;
  --radius-pill: 980px;

  /* ---- Motion: iOS-style spring-ish ease, not a linear web ease ---- */
  --ease-apple: cubic-bezier(0.25, 0.1, 0.15, 1);
  --dur-fast: 220ms;
  --dur-med: 420ms;
  --dur-slow: 760ms;
}