/* ============================================
   YIFU Design Tokens
   Brand Visual System V1.0
   ============================================ */

:root {
  /* --- Colors: Primary Neutrals --- */
  --color-pearl: #F7F5F1;
  --color-ivory: #FBFAF8;
  --color-mist: #EFECE6;
  --color-warm-gray: #E5E1DA;

  /* --- Colors: Text --- */
  --color-text: #252525;
  --color-muted: #74706A;
  --color-tertiary: #9A958E;

  /* --- Colors: Accent --- */
  --color-champagne: #B9A47B;

  /* --- Colors: Science --- */
  --color-science: #E8ECEC;

  /* --- Colors: Footer --- */
  --footer-bg: #252525;
  --footer-text: #F7F5F1;
  --footer-muted: rgba(247, 245, 241, 0.65);
  --footer-border: rgba(247, 245, 241, 0.12);

  /* --- Gradients --- */
  --gradient-hero: linear-gradient(135deg, #FBFAF8 0%, #F3F0EB 52%, #E5E1DA 100%);
  --gradient-science: linear-gradient(135deg, #F7F7F5 0%, #EEF0EE 52%, #E8ECEC 100%);

  /* --- Typography --- */
  --font-en: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-serif: "Noto Serif SC", "Source Han Serif SC", "Songti SC", serif;
  --font-sans: "Noto Sans SC", "Source Han Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;

  /* --- Font Sizes (clamp) --- */
  --fs-h1: clamp(2.6rem, 5vw, 4.8rem);
  --fs-h2: clamp(2rem, 3.4vw, 3.8rem);
  --fs-h3: clamp(1.35rem, 2vw, 2rem);
  --fs-body-lg: clamp(1.05rem, 1.4vw, 1.3rem);
  --fs-body: clamp(1rem, 1vw, 1.125rem);
  --fs-eyebrow: 0.75rem;
  --fs-meta: 0.875rem;
  --fs-small: 0.8125rem;

  /* --- Line Heights --- */
  --lh-tight: 1.08;
  --lh-heading: 1.18;
  --lh-body: 1.85;
  --lh-body-lg: 1.8;

  /* --- Spacing --- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-30: 120px;
  --space-36: 144px;
  --space-40: 160px;

  /* --- Section Spacing --- */
  --section-gap: clamp(64px, 8vw, 120px);
  --section-gap-lg: clamp(80px, 10vw, 160px);

  /* --- Container --- */
  --container-xl: 1440px;
  --container-main: 1320px;
  --container-reading: 800px;
  --container-width: min(100% - 48px, 1320px);

  /* --- Radius --- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;

  /* --- Border --- */
  --border-thin: 1px solid var(--color-warm-gray);
  --border-footer: 1px solid var(--footer-border);

  /* --- Shadow --- */
  --shadow-soft: 0 12px 32px rgba(0, 0, 0, 0.05);

  /* --- Motion --- */
  --motion-fast: 220ms;
  --motion-base: 360ms;
  --motion-slow: 620ms;
  --easing: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* --- Header --- */
  --header-height: 80px;
  --header-height-mobile: 68px;

  /* --- Z-index --- */
  --z-header: 1000;
  --z-mega: 990;
  --z-search: 1100;
  --z-drawer: 1200;
  --z-modal: 1300;
}