/**
 * tokens.css - Zipoo Display 设计令牌
 * 方案一：浅奢香槟 · 米白基底
 * 暖调象牙白 #F8F5F0 / 浅灰咖 #E8E2D9 / 哑光香槟金 #C8A97E / 深炭灰文字 #2A2A2A
 * 全站浅色基底，靠卡片底色和 1px 金边做层次
 */

:root {
  /* ========== 中性主基底（浅色系） ========== */
  --color-ivory:         #F8F5F0;   /* 暖调象牙白 - 主基底 */
  --color-ivory-soft:    #FFFFFF;   /* 纯白 - 卡片底 */
  --color-beige:         #E8E2D9;   /* 浅灰咖 - 层次辅助 */
  --color-beige-deep:    #DDD5C8;   /* 深灰咖 - 分割区块/footer */
  --color-charcoal:      #2A2A2A;   /* 深炭灰 - 文字主色（不用纯黑） */
  --color-gray-deep:     #E8E2D9;   /* 兼容别名 = beige */
  --color-gray-mid:      #6A6A6A;   /* 中灰 - 次要文字 */
  --color-gray-soft:     #9A9A9A;   /* 浅灰 - 辅助文字 */
  --color-gray-lighter:  #E8E2D9;
  --color-text:          #2A2A2A;   /* 语义别名 - 主文字 */
  --color-text-soft:     #6A6A6A;   /* 语义别名 - 次要文字 */
  --color-text-mute:     #9A9A9A;   /* 语义别名 - 辅助文字 */
  --color-bg:            #F8F5F0;   /* 语义别名 - 主基底 */
  --color-bg-surface:    #FFFFFF;   /* 语义别名 - 卡片底 */
  --color-bg-alt:        #E8E2D9;   /* 语义别名 - 层次辅助 */
  --color-border:        rgba(200, 169, 126, 0.25);
  --color-border-soft:   rgba(42, 42, 42, 0.08);

  /* ========== 品牌点缀色（香槟金 ≤10% 用量） ========== */
  --brand-accent:        #C8A97E;   /* 哑光香槟金 - 主点缀 */
  --brand-accent-soft:   #D8BC92;   /* 浅香槟金 - hover */
  --brand-accent-deep:   #8a6f4a;   /* 深香槟金 - press/edge */
  --brand-accent-bright: #E8D2A8;   /* 亮香槟金 - 高光 */

  /* ========== 金属质感渐变（哑光，不亮闪） ========== */
  --metallic-gold:       linear-gradient(135deg, #D8BC92 0%, #C8A97E 50%, #8a6f4a 100%);
  --metallic-gold-soft:  linear-gradient(135deg, rgba(200,169,126,0.08) 0%, rgba(200,169,126,0.02) 100%);
  --metallic-shine:      linear-gradient(105deg, transparent 30%, rgba(232,210,168,0.3) 45%, rgba(255,255,255,0.5) 50%, rgba(232,210,168,0.3) 55%, transparent 70%);
  --metallic-divider:    linear-gradient(90deg, transparent 0%, var(--brand-accent) 20%, var(--brand-accent-bright) 50%, var(--brand-accent) 80%, transparent 100%);

  /* ========== SVG Noise 肌理（磨砂金属 + 宣纸，4% alpha） ========== */
  --texture-frosted-metal: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65 0.65' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.78 0 0 0 0 0.66 0 0 0 0 0.42 0 0 0 0.04 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --texture-rice-paper:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.4 0 0 0 0 0.36 0 0 0 0 0.3 0 0 0 0.035 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E");

  /* ========== 玻璃拟态 ========== */
  --glass-bg:            rgba(248, 245, 240, 0.75);
  --glass-bg-surface:    rgba(255, 255, 255, 0.92);
  --glass-blur:          blur(16px) saturate(1.3);
  --glass-border:        1px solid rgba(200, 169, 126, 0.25);

  /* ========== 功能色 ========== */
  --color-error:         #dc2626;
  --color-success:       #16a34a;
  --color-warning:       #f59e0b;

  /* ========== 区域适配钩子（默认 = 全球） ========== */
  --region-accent:       var(--brand-accent);
  --region-accent-soft:  var(--brand-accent-soft);
  --region-letter:       0;
  --region-radius:       6px;

  /* ========== 字体（系统栈优先，零网络开销） ========== */
  --font-sans:           -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono:           "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* ========== 字号阶梯 ========== */
  --text-xs:             12px;
  --text-sm:             14px;
  --text-base:           16px;
  --text-md:             18px;
  --text-lg:             24px;
  --text-xl:             32px;
  --text-2xl:            48px;
  --text-3xl:            64px;
  --text-4xl:            80px;

  /* ========== 行高 ========== */
  --leading-tight:       1.1;
  --leading-snug:        1.3;
  --leading-normal:      1.6;
  --leading-relaxed:     1.7;

  /* ========== 字距 ========== */
  --tracking-tight:      -0.02em;
  --tracking-normal:     0;
  --tracking-wide:       0.05em;
  --tracking-wider:      0.1em;
  --tracking-widest:     0.2em;

  /* ========== 字重 ========== */
  --weight-light:        300;
  --weight-normal:       400;
  --weight-medium:       500;
  --weight-semibold:     600;
  --weight-bold:         700;

  /* ========== 间距尺度（4 的倍数，放大 30%） ========== */
  --space-1:             4px;
  --space-2:             8px;
  --space-3:             12px;
  --space-4:             16px;
  --space-5:             24px;
  --space-6:             32px;
  --space-7:             62px;
  --space-8:             84px;
  --space-9:             125px;
  --space-10:            168px;

  /* 兼容别名（components.css 旧代码使用） */
  --spacing-xs:          var(--space-1);
  --spacing-sm:          var(--space-2);
  --spacing-md:          var(--space-4);
  --spacing-lg:          var(--space-5);
  --spacing-xl:          var(--space-6);
  --spacing-2xl:         var(--space-7);

  /* ========== 容器与网格 ========== */
  --container-max:       1280px;
  --container-padding:   32px;
  --grid-columns:        12;
  --grid-gap:            24px;

  /* ========== 响应断点 ========== */
  --bp-mobile:           767px;
  --bp-tablet:           1023px;
  --bp-desktop:          1024px;

  /* ========== 圆角（小圆角，精致） ========== */
  --radius-sm:           3px;
  --radius-md:           var(--region-radius);
  --radius-lg:           12px;
  --radius-full:         9999px;

  /* ========== 阴影（柔和漫反射，暖调） ========== */
  --shadow-sm:           0 1px 2px rgba(42, 42, 42, 0.04);
  --shadow-md:           0 4px 24px -8px rgba(42, 42, 42, 0.06), 0 2px 8px -4px rgba(42, 42, 42, 0.04);
  --shadow-lg:           0 12px 40px -12px rgba(42, 42, 42, 0.1), 0 4px 12px -6px rgba(42, 42, 42, 0.06);
  --shadow-xl:           0 24px 56px -16px rgba(42, 42, 42, 0.15), 0 8px 20px -8px rgba(42, 42, 42, 0.08);
  --shadow-hero:         0 60px 100px -20px rgba(42, 42, 42, 0.12);
  --shadow-gold-glow:    0 0 20px rgba(200, 169, 126, 0.15);
  --shadow-text-warm:    0 0 24px rgba(200, 169, 126, 0.1);

  /* ========== 动效 ========== */
  --ease-soft:           cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:            cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast:     150ms var(--ease-soft);
  --transition-base:     300ms var(--ease-soft);
  --transition-slow:     600ms var(--ease-out);

  /* ========== Header（浅色玻璃拟态） ========== */
  --header-height:       72px;
  --header-height-mobile: 56px;
  --header-bg:           rgba(248, 245, 240, 0.7);
  --header-bg-scrolled:  rgba(248, 245, 240, 0.92);
  --header-backdrop:     blur(16px) saturate(1.3);

  /* ========== Z-index 层级 ========== */
  --z-base:              1;
  --z-header:            100;
  --z-dropdown:          200;
  --z-overlay:           500;
  --z-modal:             1000;
  --z-cursor:            9999;
}

/* ========== 区域适配（由 inc/polylang.php 给 body 加类） ========== */
.region-eu {
  --region-accent:       #C8A97E;
  --region-accent-soft:  #D8BC92;
  --region-letter:       0.02em;
}

.region-us {
  --region-accent:       #C8A97E;
  --region-accent-soft:  #D8BC92;
}

.region-me {
  --region-accent:       #C8A97E;
  --region-accent-soft:  #D8BC92;
}

.region-mx {
  --region-accent:       #B4A086;
  --region-accent-soft:  #C8B8A0;
  --region-radius:       6px;
}

.region-ru {
  --region-accent:       #C8A97E;
  --region-accent-soft:  #D8BC92;
  --region-letter:       -0.01em;
}

/* ========== reduced motion ========== */
@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast:   0ms;
    --transition-base:   0ms;
    --transition-slow:   0ms;
  }
}