/* Hallmark · genre: playful · macrostructure: Catalogue · theme: Hum
 * enrichment: Tier-A CSS card-fan character moment · nav: N7 · footer: Ft8
 * axes: paper light (L 97% warm cream) / display rounded-sans / accent multi (pear · cyan · coral)
 * motion: push-button press · card lift + tint · counter tick-up · star-burst
 * pre-emit critique: P5 H4 E5 S5 R4 V5
 */

:root {
  /* --- Surface: warm cream, never pure white --- */
  --color-paper:      oklch(97% 0.012 95);
  --color-paper-2:    oklch(94% 0.016 95);
  --color-paper-3:    oklch(91% 0.020 95);
  --color-rule:       oklch(86% 0.014 95);
  --color-rule-soft:  oklch(92% 0.012 95);

  /* --- Ink: near-black with a cool tilt, never pure black --- */
  --color-ink:        oklch(20% 0.012 250);
  --color-ink-2:      oklch(38% 0.012 250);
  --color-muted:      oklch(48% 0.012 250);   /* 5.99:1 on paper */
  --color-faint:      oklch(56% 0.010 250);   /* 4.26:1 on paper，只用于大一点的字 */

  /* --- Accents. Every accent used as text or as a button face carries
         4.5:1 or better against the surface it sits on. --- */
  --color-accent:      oklch(86% 0.18 95);   /* pear — button face, ink on top */
  --color-accent-deep: oklch(72% 0.17 95);   /* pear edge / inset */
  --color-accent-2:    oklch(45% 0.14 235);  /* sky-cyan — links (6.36:1 on paper) */
  --color-accent-2-ink:oklch(62% 0.16 235);  /* sky-cyan at button lightness, ink on top */
  --color-accent-2-bg: oklch(94% 0.045 235);
  --color-accent-3:    oklch(55% 0.20 18);   /* coral — button face, paper on top (4.95:1) */
  --color-accent-3-bg: oklch(95% 0.045 18);
  --color-mint:        oklch(80% 0.16 150);
  --color-mint-bg:     oklch(95% 0.045 150);
  --color-lavender:    oklch(74% 0.16 305);
  --color-lav-bg:      oklch(95% 0.035 305);
  --color-focus:       oklch(45% 0.18 250);

  /* --- 由基础色派生的中间色，供阴影 / 内嵌边 / 播放器边框使用 --- */
  --color-ink-soft:    oklch(26% 0.012 250);   /* 播放器桌面 */
  --color-rule-ink:    oklch(36% 0.012 250);   /* 深底上的分隔线 */
  --color-accent-deep-2: oklch(72% 0.17 95);   /* 梨黄内嵌边 */
  --shadow-ink-04:     oklch(20% 0.012 250 / 0.06);
  --shadow-ink-30:     oklch(20% 0.012 250 / 0.3);
  --shadow-ink-40:     oklch(20% 0.012 250 / 0.4);
  --shadow-pear:       oklch(76% 0.20 95 / 0.45);

  /* --- Type --- */
  --font-display: "Plus Jakarta Sans", ui-rounded, "Segoe UI", system-ui, sans-serif;
  --font-body:    "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system,
                  "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --font-label:   "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --text-2xs:  0.7rem;
  --text-xs:   0.8rem;
  --text-sm:   0.9rem;
  --text-base: 1.0625rem;
  --text-md:   1.2rem;
  --text-lg:   1.45rem;
  --text-xl:   1.85rem;
  --text-2xl:  2.4rem;
  --text-3xl:  clamp(2.6rem, 6vw + 0.6rem, 4.2rem);

  /* --- Space: 4pt scale --- */
  --space-3xs: 0.125rem;
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2.25rem;
  --space-2xl: 3.5rem;
  --space-3xl: 5rem;

  /* --- Shape: rounded everything --- */
  --radius-card:  20px;
  --radius-lg:    14px;
  --radius-input: 12px;
  --radius-pill:  999px;

  /* --- Shadow: layered contact + ambient, never one blanket shadow --- */
  --shadow-card:  0 1px 2px oklch(20% 0.012 250 / 0.05), 0 12px 32px -16px oklch(20% 0.012 250 / 0.16);
  --shadow-lift:  0 2px 4px oklch(20% 0.012 250 / 0.06), 0 22px 44px -20px oklch(20% 0.012 250 / 0.22);

  /* --- One shell width, every section obeys it --- */
  --shell: 1180px;
  --page-gutter: 1.25rem;
  --section-gap: var(--space-2xl);

  /* --- Motion --- */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-snap:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out:    cubic-bezier(0.2, 0.7, 0.3, 1);
}

@media (min-width: 700px) {
  :root { --page-gutter: 2rem; --section-gap: var(--space-3xl); }
}