/* ==========================================================================
   小芽乐园 · 设计变量
   低龄友好：柔和低饱和、圆润、大字号、大触控区
   ========================================================================== */
@font-face {
  font-family: "Nunito";
  src: url("../../assets/fonts/nunito-latin.woff2") format("woff2");
  font-weight: 200 1000;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* 底色与文字 */
  --bg: #fff8f0;
  --bg-deep: #ffefdf;
  --surface: #ffffff;
  --surface-soft: #fffaf4;
  --ink: #453d54;
  --ink-soft: #6f667f;
  --muted: #9a91a8;
  --line: #f0e6da;

  /* 主题色：柔和不刺眼 */
  --green: #6ec79f;
  --green-deep: #2f7f5f;
  --green-soft: #ddf3e8;
  --coral: #f2938a;
  --coral-soft: #ffe5df;
  --sun: #f5c45c;
  --sun-soft: #fff2cd;
  --sky: #7cc1e8;
  --sky-soft: #e2f3fc;
  --grape: #b29be8;
  --grape-soft: #efe8ff;
  --rose: #f4a8c0;
  --rose-soft: #ffe6ee;

  /* 圆角与阴影 */
  --r-xs: 12px;
  --r-sm: 18px;
  --r-md: 26px;
  --r-lg: 34px;
  --r-xl: 44px;
  --shadow-s: 0 2px 0 rgba(94, 78, 110, 0.06), 0 6px 16px rgba(94, 78, 110, 0.07);
  --shadow-m: 0 4px 0 rgba(94, 78, 110, 0.05), 0 14px 30px rgba(94, 78, 110, 0.09);
  --shadow-l: 0 22px 50px rgba(94, 78, 110, 0.14);
  --press: 0 2px 0 rgba(94, 78, 110, 0.1);

  /* 尺寸节奏 */
  --tap: 88px;
  --pad: clamp(18px, 3.4vw, 40px);
  --gap: clamp(12px, 1.8vw, 22px);
  --maxw: 1180px;

  /* 动效 */
  --ease: cubic-bezier(0.2, 0.9, 0.25, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --fast: 0.16s;
  --mid: 0.3s;
  --slow: 0.55s;

  /* 字号（iPad 上按视口自适应） */
  --f-display: clamp(40px, 6vw, 76px);
  --f-title: clamp(28px, 3.6vw, 46px);
  --f-head: clamp(22px, 2.6vw, 32px);
  --f-body: clamp(17px, 1.9vw, 22px);
  --f-small: clamp(14px, 1.5vw, 17px);

  /* 安全区 */
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
}

/* 每个单元的主题色由 JS 注入到内联样式：--unit-main / --unit-soft / --unit-deep */
[data-unit] {
  --unit-main: var(--green);
  --unit-soft: var(--green-soft);
  --unit-deep: var(--green-deep);
}