/* =====================================================================
   tokens.css — design variables for the AI companion product site
   Shared across all pages. Change values here to re-theme the site.
   ===================================================================== */

:root {
  /* ---- Color: neutral warm base ---- */
  --c-bg:            #faf6f0;   /* warm off-white page background */
  --c-bg-soft:       #f3ece2;   /* slightly deeper warmth for bands */
  --c-surface:       #ffffff;   /* cards / elevated surfaces */
  --c-ink:           #2e2723;   /* primary text (warm charcoal) */
  --c-ink-soft:      #6b6157;   /* secondary text  */
  --c-ink-faint:     #a49a8e;   /* tertiary / captions */
  --c-line:          #e7ddd0;   /* hairline borders */
  --c-line-soft:     #efe7db;

  /* ---- Color: brand (from company logo 巨象人科技 / HUMANREAL TECH) ----
     Violet purple rounded square + lighter face silhouette + white
     circuit chip, with a navy wordmark. These are the brand anchors. */
  --c-brand:        #6a49a3;   /* logo purple square */
  --c-brand-deep:   #543a86;   /* deeper purple (hover / depth) */
  --c-brand-lite:   #8b68bb;   /* lighter face-profile purple */
  --c-brand-bg:     #efeaf7;   /* soft purple tint */
  --c-brand-glow:   rgba(106, 73, 163, .32);
  --c-navy:         #1c2a4a;   /* logo navy wordmark */

  /* ---- Color: MoKoPal accent (warm coral / amber) ----
     The logo is cool purple; MoKoPal keeps a warm coral so the
     "everyday warmth" product still reads warm against the brand. */
  --c-moko-from:     #f2a464;
  --c-moko-to:       #e1714b;
  --c-moko-ink:      #a84e2c;
  --c-moko-bg:       #fdeee0;
  --c-moko-glow:     rgba(241, 152, 96, .35);

  /* ---- Color: SE X-Bot accent (aligned to logo violet) ----
     The "soulful / tech" product line shares the company brand purple. */
  --c-sebot-from:    #8b68bb;
  --c-sebot-to:      #6a49a3;
  --c-sebot-ink:     #4a3a80;
  --c-sebot-bg:      #ece7f7;
  --c-sebot-glow:    rgba(106, 73, 163, .35);

  /* ---- Typography ---- */
  --font-sans: "Manrope", "Inter", "PingFang SC", "Microsoft YaHei",
               system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Manrope", "Inter", "Noto Sans SC", "PingFang SC",
               "Microsoft YaHei", system-ui, sans-serif;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --fs-hero: clamp(2rem, 4.2vw, 3.9rem);
  --fs-h1:   clamp(2rem, 4.5vw, 3.2rem);
  --fs-h2:   clamp(1.55rem, 3.2vw, 2.3rem);
  --fs-h3:   1.25rem;
  --fs-lead: clamp(1.05rem, 2vw, 1.35rem);
  --fs-body: 1rem;
  --fs-small: 0.92rem;
  --fs-caption: 0.82rem;

  /* ---- Spacing ---- */
  --sp-1:  0.5rem;
  --sp-2:  1rem;
  --sp-3:  1.5rem;
  --sp-4:  2rem;
  --sp-5:  3rem;
  --sp-6:  4.5rem;
  --sp-7:  6.5rem;
  --section: clamp(4.5rem, 9vw, 8rem);   /* vertical rhythm of sections */
  --container: 74rem;                    /* max content width */
  --container-wide: 86rem;

  /* ---- Radii & shadow ---- */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 26px;
  --r-pill: 999px;
  --shadow-sm: 0 2px 8px rgba(46, 39, 35, .06);
  --shadow-md: 0 10px 30px rgba(46, 39, 35, .10);
  --shadow-lg: 0 24px 60px rgba(46, 39, 35, .16);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(.22, .61, .36, 1);
  --dur-fast: .18s;
  --dur: .4s;
  --dur-slow: .7s;

  /* ---- Layout help ---- */
  --nav-h: 72px;
}