/* sorbae.ai marketing site — design tokens.
 *
 * Palette is Nova's own: the dark terracotta skin taken VERBATIM from
 * app/web/css/tokens.css, so the marketing site and the app read as one
 * product. Do not fork these values.
 *
 * What is borrowed from Replika is the LAYOUT LOGIC and the ASSET STRATEGY,
 * not the look:
 *   - every section is carried by a real image or video of the product,
 *     never by an icon or an illustration
 *   - the figure is cut out and composited with live UI (chat bubbles,
 *     call chrome) floating over it, so one asset shows the character AND
 *     the product at once
 *   - full-bleed media bands break up the page and carry the big statements
 *   - features are three photo cards, not a feature table
 *   - social proof is a colour-blocked story carousel, not star ratings
 */

:root {
  color-scheme: dark;

  /* ---- Canvas: verbatim from the app ---- */
  --bg: #0c0e11;
  --surface: #14171b;
  --stage: #1a1d22;
  --bubble-in: #1c2027;
  --hairline: #262b33;

  /* ---- Accent (panna cotta — warm cream on the dark canvas) ----
   * Marketing-site accent. The app keeps its terracotta; the site pairs the
   * same dark canvas with a cream accent so real app captures (terracotta
   * bubbles, salmon call buttons) sit inside it as the warm spot of colour. */
  --accent: #ead9bd;
  --on-accent: #221a10;
  --accent-disc: #383327;
  --accent-dim: #6b5f49;

  /* ---- Text, verbatim ---- */
  --text-1: #e8eaed;
  --text-2: #8b929c;
  --text-3: #6b7280;

  /* ---- Signals, verbatim ---- */
  --online: #4ade80;
  --danger: #e5484d;
  --meter-off: #4b5563;

  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;

  /* ---- Marketing-only additions ---- */
  --surface-2: #1f242b;
  --accent-hi: #f5e8d2;
  --accent-soft: rgba(234, 217, 189, 0.12);

  /* Warm ambient wash behind hero and closing figures. Stands in for the
   * lighting in the real cutout renders — replace nothing, it sits behind
   * them. */
  --wash: radial-gradient(
      70% 60% at 62% 28%,
      rgba(234, 217, 189, 0.14),
      transparent 70%
    ),
    radial-gradient(90% 70% at 12% 82%, rgba(90, 78, 120, 0.16), transparent 72%);

  /* Type — heavy geometric sans, tight tracking. Big and confident, the way
   * a consumer landing page reads; nothing editorial or bookish. */
  --fs-hero: clamp(2.7rem, 6.4vw, 5.1rem);
  --fs-h2: clamp(1.95rem, 4vw, 3.05rem);
  --fs-h3: 1.1875rem;
  --fs-body: 1.0625rem;
  --fs-sm: 0.9375rem;
  --fs-xs: 0.8125rem;

  --lh-tight: 1.04;
  --lh-body: 1.6;
  --lh-legal: 1.72;

  --sp-1: 0.5rem;
  --sp-2: 1rem;
  --sp-3: 1.5rem;
  --sp-4: 2.5rem;
  --sp-5: 4rem;
  --sp-6: 6.5rem;
  --sp-7: 9.5rem;

  --measure: 58ch;
  --measure-legal: 72ch;
  --page-max: 1200px;
  --page-pad: clamp(1.25rem, 4vw, 2.5rem);

  /* Round, like the reference — cards and buttons are soft, not boxy */
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 26px;
  --radius-xl: 34px;
  --radius-pill: 999px;

  --hairline-w: 1px;
  --shadow-card: 0 2px 6px rgba(0, 0, 0, 0.3), 0 18px 44px rgba(0, 0, 0, 0.34);
  --shadow-float: 0 10px 44px rgba(0, 0, 0, 0.5);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-1: 180ms;
  --dur-2: 300ms;
  --dur-3: 480ms;
}