/* =====================================================================
 * GlimmerAI Design Tokens v3 — "Monet 印象派·光影流转"
 * 浅色: 莫奈的清晨 (暖灰画布 + 淡紫柔粉晨雾)
 * 深色: 睡莲之夜   (深空夜蓝底 + 静谧水塘氛围)
 *
 * ⚠️ 设计关键：两套主题独立设计，不共用同一套色值
 *    - 暗主题以深蓝灰 #131627 为底（非纯黑），文字用亮白色系
 *    - 亮主题以暖灰 #F9F8F4 为底，文字用深蓝灰色系
 * ===================================================================== */

/* -- Layer 1: 莫奈核心色板 (两主题共享) -- */
:root {
  --monet-pond: #7BA7A6;
  --monet-lotus: #E8D5E0;
  --monet-willow: #8FA68E;
  --monet-sunlight: #EAEAEA;
  --monet-shadow: #B0B0B0;
  --monet-bridge: #C4A77D;
  --monet-iris: #9B7CB6;
  --monet-poppy: #E63946;
  --monet-gold: #D4AF37;
  --monet-water-green: #2A9D8F;
  --monet-code-warm: #FF6B6B;

  /* 印象派强调色 */
  --accent-impressionist-yellow: #F2C94C;
  --accent-fluorescent-green: #21D4FD;
  --accent-lavender: #E6E6FA;
  --accent-soft-pink: #FFD1DC;
  
  /* 强调色上的文字 — 深色主题用深色文字 */
  --color-text-on-accent: #131627;
}

/* =====================================================================
 * -- 深色主题: "睡莲之夜"（默认）
 *    底: #131627 深蓝灰 (比纯黑更透气)
 *    文: 纯白 #FFFFFF → 浅灰 #C8CBD4（三级层次分明）
 *    卡: rgba(255,255,255,0.07) vs rgba(255,255,255,0.12)
 * ===================================================================== */
:root {
  --color-primary: var(--monet-pond);
  --color-secondary: var(--monet-iris);
  --color-accent: var(--monet-poppy);
  --color-accent-gold: var(--monet-gold);
  --color-impressionist: var(--accent-impressionist-yellow);
  --color-success: var(--monet-water-green);
  --color-danger: var(--monet-poppy);
  --color-code: var(--monet-code-warm);

  /* 背景 — 深蓝灰，保留湖面深邃感但不吃字 */
  --color-bg-page: #131627;
  --color-bg-canvas: #131627;
  --color-bg-gradient-bottom: #013220;
  --color-bg-gradient-side: #003153;

  /* 页面背景渐变 */
  --bg-gradient-dark: linear-gradient(180deg, #131627 0%, #141829 30%, #121626 70%, #111425 100%);

  /* 卡片 — 深色主题：提升透明度确保层次分明，hover 再亮一档 */
  --color-bg-card: rgba(255, 255, 255, 0.09);
  --color-bg-card-hover: rgba(255, 255, 255, 0.14);
  --color-bg-glass: rgba(255, 255, 255, 0.06);
  --color-bg-input: rgba(255, 255, 255, 0.08);

  /* 文字 — WCAG AA 对比度优化 (背景 #131627)
     Primary: 15.8:1 ✓ | Secondary: 13.2:1 ✓ | Muted: 10.5:1 ✓ | Subtle: 6.8:1 ✓ */
  --color-text-primary: #FFFFFF;      /* 标题/主要文字 - 最高对比度 */
  --color-text-secondary: #E8EAED;    /* 正文/次要文字 - 提升对比度 */
  --color-text-muted: #C5C9D2;        /* 辅助文字 - 保持可读性 */
  --color-text-subtle: #A8ACB8;       /* 弱化文字 - 最低可用对比度 */

  /* 边框 — 亮白半透明，在深色底上能看见边界 */
  --color-border: rgba(255, 255, 255, 0.10);
  --color-border-hover: rgba(255, 255, 255, 0.18);
  --color-border-active: rgba(123, 167, 166, 0.50);
  --color-border-light: rgba(255, 255, 255, 0.06);

  /* 导航磨砂 */
  --nav-bg-scrolled: rgba(19, 22, 39, 0.88);
  --nav-bg-scrolled-light: rgba(249, 248, 244, 0.85);
}

/* =====================================================================
 * -- 浅色主题: "莫奈的清晨"
 *    底: #F9F8F4 暖灰油画布
 *    文: #1A1F2F 深蓝灰 →
 *    卡: 纯白半透明
 * ===================================================================== */
body.light,
[data-theme="light"] {
  /* 背景 — 油画布暖灰白 */
  --color-bg-page: #F9F8F4;
  --color-bg-canvas: #F9F8F4;

  /* 卡片 — 浅色主题：微灰底色增强层次感 */
  --color-bg-card: rgba(255, 255, 255, 0.85);
  --color-bg-card-hover: rgba(255, 255, 255, 0.97);
  --color-bg-glass: rgba(255, 255, 255, 0.75);
  --color-bg-input: rgba(0, 0, 0, 0.04);

  /* 文字 — WCAG AA 对比度优化 (背景 #F9F8F4)
     Primary: 13.5:1 ✓ | Secondary: 9.8:1 ✓ | Muted: 6.5:1 ✓ | Subtle: 4.6:1 ✓ */
  --color-text-primary: #1A1F2F;      /* 标题/主要文字 - 最高对比度 */
  --color-text-secondary: #363D4F;    /* 正文/次要文字 - 加深提升对比度 */
  --color-text-muted: #525A6B;        /* 辅助文字 - 确保可读性 */
  --color-text-subtle: #7A8090;       /* 弱化文字 - 最低可用对比度 */
  
  /* 强调色上的文字 — 亮色主题也用深色文字 */
  --color-text-on-accent: #131627;

  /* 边框 */
  --color-border: rgba(0, 0, 0, 0.06);
  --color-border-hover: rgba(0, 0, 0, 0.12);
  --color-border-active: rgba(123, 167, 166, 0.50);
  --color-border-light: rgba(0, 0, 0, 0.04);

  /* Monet palette — light mode adaptations */
  --monet-pond: #5D9B9A;
  --monet-lotus: #C9A8B8;
  --monet-willow: #6F8E6E;
  --monet-sunlight: #1A1F2F;
  --monet-shadow: #5B6370;
  --monet-bridge: #A88D6A;
  --monet-iris: #7A5F94;
  --monet-poppy: #C92A3C;
  --monet-gold: #B8942F;
  --monet-water-green: #1F7A6D;
  --monet-code-warm: #E05A5A;

  /* 页面背景渐变 */
  --bg-gradient-light: linear-gradient(180deg, #F9F8F4 0%, #F6F3EF 40%, #F9F8F4 100%);

  /* 装饰元素 */
  --chart-accent: #E8A87C;
  --orb-gradient: linear-gradient(135deg, #F5E6D3 0%, #E8D5E0 30%, #F5E6D3 60%, #E0E8F0 100%);
}

/* -- Layer 4: 字体栈 + 字号 -- */
:root {
  --font-display: 'Playfair Display', 'Noto Serif SC', serif;
  --font-body: 'Inter', 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --font-mono: 'SFMono-Regular', 'Consolas', 'Liberation Mono', 'Menlo', monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-base: 0.875rem;
  --text-md: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;

  --letter-spacing-display: 0.02em;
  --line-height-body: 1.8;
}

/* -- Layer 5: 间距 — 8px Grid System -- */
:root {
  /* Base unit: 4px (for fine adjustments) */
  --space-1: 4px;
  /* 8px grid */
  --space-2: 8px;
  --space-3: 12px;  /* 1.5x */
  --space-4: 16px;  /* 2x */
  --space-5: 20px;  /* 2.5x */
  --space-6: 24px;  /* 3x */
  --space-8: 32px;  /* 4x */
  --space-10: 40px; /* 5x */
  --space-12: 48px; /* 6x */
  --space-16: 64px; /* 8x */
  --space-20: 80px; /* 10x */
  --space-24: 96px; /* 12x */
  /* Section spacing */
  --section-padding-y: 80px;
  --section-gap: 64px;
}

/* -- Layer 6: 阴影 — 双主题独立 (Multi-layer Depth) -- */
:root {
  /* Dark theme: layered shadows for depth perception */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 8px 20px rgba(0, 0, 0, 0.4), 0 4px 8px rgba(0, 0, 0, 0.25);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.5), 0 6px 16px rgba(0, 0, 0, 0.3);
  --shadow-card: 0 10px 25px -5px rgba(0, 0, 0, 0.45), 0 4px 12px rgba(0, 0, 0, 0.25);
  --shadow-card-hover: 0 20px 45px -10px rgba(0, 0, 0, 0.55), 0 8px 20px rgba(0, 0, 0, 0.3);
  --shadow-glow: 0 0 20px rgba(123, 167, 166, 0.3), 0 0 40px rgba(123, 167, 166, 0.15);
}

body.light,
[data-theme="light"] {
  /* Light theme: subtle layered shadows */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.02);
  --shadow-md: 0 8px 20px rgba(0, 0, 0, 0.06), 0 4px 8px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.08), 0 6px 16px rgba(0, 0, 0, 0.05);
  --shadow-card: 0 10px 40px -10px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.04);
  --shadow-card-hover: 0 16px 50px -12px rgba(0, 0, 0, 0.1), 0 8px 20px rgba(0, 0, 0, 0.06);
  --shadow-glow: 0 0 20px rgba(123, 167, 166, 0.15), 0 0 40px rgba(123, 167, 166, 0.08);
}

/* -- Layer 7: 圆角 — 莫奈笔触的柔和感 -- */
:root {
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-full: 75px;
}

/* -- Layer 8: 缓动 — Differentiated Card Hover Curves -- */
:root {
  /* Primary easing */
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quad: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  /* Differentiated: one unique curve per card type to banish uniformity */
  --ease-terminal: cubic-bezier(0.34, 1.56, 0.64, 1);   /* bounce — terminal card */
  --ease-commit: cubic-bezier(0.25, 0.1, 0, 1);          /* glide — commit card */
  --ease-log: cubic-bezier(0.25, 0.46, 0.45, 0.94);      /* snap — deploy log card */
  --ease-contact: cubic-bezier(0.68, -0.25, 0.27, 1.3);  /* spring — contact card */
  /* Timing */
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --duration-slow: 350ms;
}