/* ============================================================
   Design tokens — Huaxiang Diaper
   Colour, type scale, spacing, radius, shadow, container.
   ============================================================ */

:root {
  /* brand palette (ported from the approved design) */
  --teal: #27279D;
  --teal-d: #1B1B7A;
  --ink: #16163C;
  --ink-2: #4A4A6E;
  --rose: #F90E56;
  --rose-light: #FF5C8A;
  --rose-ink: #C4073D;
  --note-ink: #5B6472;
  --bg: #ffffff;
  --bg-soft: #F2F3FB;
  --line: #DFDFEF;
  --amber: #F90E56;
  --blue: #27279D;
  --whatsapp: #25D366;
  --footer-bg: #101034;
  --footer-line: #2A2A5E;
  --tint: #E9E9F8;

  /* text on dark surfaces */
  --on-dark: #C6C7E8;
  --on-dark-strong: #ffffff;
  --on-dark-muted: #9FA1C8;

  /* type */
  --font-sans: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-base: 16px;
  --fs-md: 16px;
  --fs-lg: 18px;
  --fs-h3: 20px;
  --fs-h2: 34px;
  --fs-h1: 46px;
  --lh-tight: 1.25;
  --lh-body: 1.65;

  /* spacing */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 22px;
  --sp-6: 28px;
  --sp-7: 36px;
  --sp-8: 44px;
  --sp-9: 56px;
  --sp-10: 72px;
  --section-y: 72px;

  /* shape */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 14px;
  --radius-xl: 16px;
  --radius-pill: 20px;

  /* elevation */
  --shadow-sm: 0 8px 20px rgba(22, 22, 60, 0.08);
  --shadow-md: 0 12px 30px rgba(39, 39, 157, 0.12);
  --shadow-lg: 0 16px 40px rgba(22, 22, 60, 0.14);

  /* layout */
  --container: 1200px;
  --gutter: 24px;
  --nav-h: 72px;
  --hero-gradient: linear-gradient(120deg, #16163C 0%, #1E1E7A 55%, #27279D 100%);
  /* 首屏背景图上的深色遮罩:左侧最重,保证白色标题可读 */
  --hero-scrim: linear-gradient(115deg, rgba(16, 16, 52, 0.93) 0%, rgba(25, 25, 95, 0.84) 48%, rgba(39, 39, 157, 0.60) 100%);
  --cta-gradient: linear-gradient(120deg, #16163C, #27279D);
}

@media (max-width: 768px) {
  :root {
    --fs-h1: 30px;
    --fs-h2: 26px;
    --section-y: 60px;
    --gutter: 18px;
  }
}