/* ============================================================
   信宜中学 11 周年校庆官网 — 设计令牌 (Design Tokens)
   视觉语言：米白纸面基底 + 深青主色 + 低饱和暖金点缀
   参考语言：高端品牌杂志式滚动叙事（era-residence.com）
   ============================================================ */

:root {
  /* ---------- 1. 色彩：基底（替代纯白，营造温润纸面质感） ---------- */
  --paper:        #F7F4EE;   /* 米白 · 主背景 */
  --paper-2:      #F1ECE3;   /* 浅一阶 · 区块交替背景 */
  --paper-3:      #E9E3D7;   /* 浅二阶 · 分割线附近 / 卡片底 */
  --surface:      #FFFDF9;   /* 卡片表面 · 近白但偏暖 */
  --surface-2:    #FCFAF5;

  /* ---------- 2. 色彩：主色（深青，提取自校徽） ---------- */
  --teal-900:     #0B3432;   /* 最深 · 大标题 / 页脚底 */
  --teal-800:     #0F4340;
  --teal-700:     #14544F;   /* 导航 / 正文标题 */
  --teal-600:     #1A6862;
  --teal-500:     #227F77;   /* 交互态 / 链接 */
  --teal-300:     #8FB8B3;
  --teal-200:     #BFD8D3;
  --teal-100:     #E2EDEA;   /* 浅青底 */

  /* ---------- 3. 色彩：点缀（11 周年专属低饱和暖金） ---------- */
  --gold-700:     #8E6E32;
  --gold-600:     #A9853F;
  --gold-500:     #C2A063;   /* 主点缀：标签 / 时间节点 / 高亮 */
  --gold-400:     #D2B67E;
  --gold-300:     #E0CBA0;
  --gold-100:     #F2E8D2;   /* 浅金底 */

  /* ---------- 4. 色彩：中性 / 语义 ---------- */
  --ink:          #1B2422;   /* 正文主文字（近黑微青） */
  --ink-2:        #3A4442;   /* 次级文字 */
  --muted:        #6E6B63;   /* 说明文字 */
  --faint:        #9A968C;   /* 弱化文字 / 图注 */
  --line:         #DDD6C8;   /* 常规分割线 */
  --line-soft:    #E8E2D6;   /* 弱分割线 */
  --success:      #4F7A52;
  --warning:      #B4843C;
  --error:        #A44A3E;

  /* ---------- 5. 字体 ---------- */
  --font-display: "Songti SC", "STSong", "Noto Serif SC", "Source Han Serif SC",
                  "SimSun", Georgia, "Times New Roman", serif;
  --font-body:    "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei",
                  system-ui, -apple-system, "Segoe UI", "Helvetica Neue", sans-serif;
  --font-mono:    "SFMono-Regular", "JetBrains Mono", Consolas, "Courier New", monospace;
  --font-en:      "Optima", "Didot", "Cormorant Garamond", Georgia, serif;

  /* 字号阶梯（流式，随视口缩放） */
  --fs-3xs: 0.6875rem;                              /* 11px 标签 */
  --fs-2xs: 0.75rem;                                /* 12px */
  --fs-xs:  0.8125rem;                              /* 13px */
  --fs-sm:  0.875rem;                               /* 14px */
  --fs-base:1rem;                                   /* 16px */
  --fs-md:  1.0625rem;                              /* 17px */
  --fs-lg:  clamp(1.125rem, 0.35vw + 1.05rem, 1.25rem);
  --fs-xl:  clamp(1.25rem, 0.7vw + 1.1rem, 1.5rem);
  --fs-2xl: clamp(1.5rem, 1.4vw + 1.2rem, 2rem);
  --fs-3xl: clamp(1.875rem, 2.2vw + 1.35rem, 2.75rem);
  --fs-4xl: clamp(2.25rem, 3.4vw + 1.5rem, 3.75rem);
  --fs-5xl: clamp(2.75rem, 5.2vw + 1.6rem, 5.5rem);   /* 首屏拆分大标题 */
  --fs-6xl: clamp(3.25rem, 8vw + 1rem, 8.5rem);       /* 背景装饰数字 */

  /* 行高 / 字距 */
  --lh-tight:  1.08;
  --lh-snug:   1.24;
  --lh-normal: 1.55;
  --lh-loose:  1.85;   /* 短引言 */
  --ls-wide:   0.18em; /* 英文小标 */
  --ls-wider:  0.32em;
  --ls-cn:     0.02em; /* 中文正文 */

  /* ---------- 6. 间距（4px 基准 · 8 点节奏） ---------- */
  --sp-1: 0.25rem;   /* 4  */
  --sp-2: 0.5rem;    /* 8  */
  --sp-3: 0.75rem;   /* 12 */
  --sp-4: 1rem;      /* 16 */
  --sp-5: 1.25rem;   /* 20 */
  --sp-6: 1.5rem;    /* 24 */
  --sp-8: 2rem;      /* 32 */
  --sp-10: 2.5rem;   /* 40 */
  --sp-12: 3rem;     /* 48 */
  --sp-16: 4rem;     /* 64 */
  --sp-20: 5rem;     /* 80 */
  --sp-24: 6rem;     /* 96 */
  --sp-32: 8rem;     /* 128 */

  /* 版块纵向留白（杂志式大面积留白） */
  --section-y:      clamp(4.5rem, 9vw, 9rem);
  --section-y-sm:   clamp(3rem, 5vw, 5rem);
  --gutter:         clamp(1.25rem, 4vw, 4rem);   /* 左右安全边距 */

  /* ---------- 7. 圆角 / 边框 / 阴影 ---------- */
  --r-xs:  2px;
  --r-sm:  4px;
  --r-md:  8px;
  --r-lg:  14px;
  --r-pill:999px;

  --shadow-xs: 0 1px 2px rgba(11, 52, 50, .05);
  --shadow-sm: 0 2px 8px rgba(11, 52, 50, .06);
  --shadow-md: 0 10px 30px -12px rgba(11, 52, 50, .18);
  --shadow-lg: 0 26px 60px -28px rgba(11, 52, 50, .28);
  --shadow-gold: 0 12px 32px -16px rgba(169, 133, 63, .45);

  /* ---------- 8. 动效（克制、不喧宾夺主） ---------- */
  --ease-out:   cubic-bezier(.22, .8, .28, 1);
  --ease-inout: cubic-bezier(.6, .04, .3, .98);
  --dur-fast:   180ms;
  --dur:        380ms;
  --dur-slow:   780ms;
  --dur-xslow:  1400ms;

  /* ---------- 9. 布局 ---------- */
  --maxw:        1440px;   /* 内容最宽 */
  --maxw-text:   720px;    /* 正文阅读宽度 */
  --maxw-narrow: 560px;
  --nav-h:       76px;

  /* ---------- 10. 层级 ---------- */
  --z-base: 1;
  --z-sticky: 40;
  --z-nav: 100;
  --z-overlay: 300;
  --z-modal: 400;
  --z-toast: 500;
  --z-slots: 900;   /* 素材槽位标注层 */
}

/* ---------- 深色模式预留（校庆后长期运营可切换） ---------- */
[data-theme="dark"] {
  --paper:      #101716;
  --paper-2:    #16201E;
  --paper-3:    #1C2725;
  --surface:    #182220;
  --surface-2:  #1E2927;
  --ink:        #EDE9E1;
  --ink-2:      #CFCBC3;
  --muted:      #9BA3A0;
  --faint:      #7A817E;
  --line:       #2C3A37;
  --line-soft:  #243130;
  --teal-100:   #16302E;
  --teal-200:   #1F4744;
  --teal-700:   #9DC4BE;
  --teal-800:   #B6D2CD;
  --teal-900:   #E3EDEA;
  --gold-500:   #D8BC84;
  --gold-100:   #2A2318;
}