/* ─────────────────────────────────────────────────────────────────────
   Design tokens — SYNCED FROM THE APP, not invented here.
   Source of truth: Beatem/src/styles.css (the main app repo), read from
   origin/main directly on 2026-08-07 after discovering the local app
   checkout used for the first pass of this file was 67 commits stale
   and missing the app's "Design system v1" overhaul entirely (brand
   went from blue #3b9fef to teal #00ced1, among other changes).
   When brand values change in the app, copy the new ones here by hand
   — do not edit these values independently of the app.
   ───────────────────────────────────────────────────────────────────── */
:root {
  /* Radii — 4 steps, matches the app's simplified scale (a 5th "2xl" step
     was removed in the app's own redesign; not reintroducing it here). */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 20px;

  --background: #f5f4f2;
  --foreground: #18150f;

  --surface: #ffffff;
  --surface-muted: #eceae7;

  --primary: #18150f;
  --primary-foreground: #ffffff;

  --secondary: #f2f2f2;
  --secondary-foreground: #18150f;

  --muted: #e0e0e0;
  --muted-foreground: #8a8a8a;

  --accent: #f2f2f2;
  --accent-foreground: #18150f;

  --border: #ebebeb;
  --border-strong: #e0e0e0;

  --success: #1a9657;
  --success-soft: #edfaf3;
  --info: #0064d2;
  --info-soft: #f0f5ff;
  --warn: #a65a08;
  --warn-soft: #fdf2e0;
  --designer: #7b1f3d;
  --designer-soft: #faf2f4;

  /* Brand — teal, "Design system v1". --brand-deep is the text-on-white
     variant (raw --brand is too light to read on a white pill). The app's
     own gradient/shadow tokens are pulled over too, so this page's "brand
     glow" moments use the exact same recipe as the app's primary CTAs
     instead of a look invented for the marketing site. */
  --brand: #00ced1;
  --brand-deep: #017577;
  --brand-soft: #e3fbfb;
  --brand-line: #9ceff0;
  --brand-foreground: #ffffff;
  --gradient-brand: linear-gradient(135deg, var(--brand) 0%, var(--brand-deep) 100%);
  --shadow-brand: 0 6px 20px color-mix(in srgb, var(--brand) 38%, transparent);

  /* Elevation — only the two steps a static marketing page has any use for
     (a lifted card, a floating element). Skipping expanded/drag; those are
     interaction states specific to the app's UI, not this page. */
  --shadow-raised: 0 1px 2px rgba(18, 23, 26, 0.06);
  --shadow-overlay: 0 8px 24px rgba(18, 23, 26, 0.13);

  /* The app's one dark surface, pulled in for the activity-log mockup
     (Trust/Safety section) -- same semantic fit the app uses it for
     ("automation happening, rendered as a dark canvas so it reads as
     its own moment"), not a new color invented for the landing page. */
  --canvas-dark: #080a10;
  /* Neutral/informational accent, real app token -- used here for the
     @username tokens in the log mockup. */
  --note: #5b4b8a;

  --platform-poshmark: #7b1f3d;
  --platform-poshmark-soft: #faf2f4;
  --platform-depop: #ff2300;
  --platform-depop-soft: #fff3f0;
  --platform-ebay: #0064d2;
  --platform-ebay-soft: #f0f5ff;
  --platform-mercari: #5356f5;
  --platform-mercari-soft: #f2f2ff;

  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

  /* Motion — same values as the app, so hover/transition feel matches. */
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
}

/* ─────────────────────────────────────────────────────────────────────
   Landing-only additions — deliberately NOT in the app's token file.
   Each one exists because the marketing site needs something the
   product UI doesn't. Keep this list short; anything that could be a
   shared token belongs above, synced from the app, instead.
   ───────────────────────────────────────────────────────────────────── */
:root {
  /* Illustration accent — the app has no warm secondary color; the
     custom people-illustrations (hero, testimonials, CTA) need one for
     warmth against the brand teal. Not used outside illustration. */
  --illustration-accent: #c4703f;
  --illustration-accent-soft: #f7ece3;

  /* Gold — a brighter, more saturated warm accent than --illustration-accent
     (which reads more terracotta/brown than yellow) or --warn (dark burnt
     amber, reserved for "coming soon" status). Same warm family, pushed
     toward true yellow and lifted in saturation specifically so it still
     pops against a dark surface (the activity-log mockup's black
     background) rather than looking muted like the other two. */
  --gold: #eab308;
  /* --gold-soft was originally #fef3c7 -- 96.5% saturation, just very
     light. That combination (high saturation + high lightness both)
     reads as candy-ish rather than elegant when used as a soft ambient
     ground (the testimonials section glow). A good "soft" pairing wants
     high lightness but only MODERATE saturation -- redefined to an
     actual desaturated champagne-gold instead of a diluted-but-still-
     vivid one. Nothing else consumed the old value yet, so this is a
     correction, not a tradeoff. */
  --gold-soft: #eddeb6;

  /* Canada flag red — a national symbol's color, not a brand choice,
     so it's sourced from the actual flag (Pantone 032C ≈ this hex)
     rather than picked to harmonize with the teal palette. Used only
     by the geo-gated "Made in Canada" badge. */
  --canada-red: #e8112d;
}