/* =====================================================================
 * GlimmerAI Design Tokens v3 — "Monet 印象派·光影流转"
 * 路径: /shared/frontend/design-tokens.css
 * 与 homepage/css/design-tokens.css 保持同步
 * ===================================================================== */

: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;
}

/* ── 深色: "睡莲之夜" (默认) ── */
: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: #0B0C15;
  --color-bg-canvas: #0B0C15;
  --color-bg-card: rgba(15, 15, 28, 0.8);
  --color-bg-card-hover: rgba(20, 22, 36, 0.92);
  --color-bg-glass: rgba(15, 15, 28, 0.7);
  --color-bg-input: rgba(15, 15, 28, 0.6);

  --color-text-primary: #EAEAEA;
  --color-text-secondary: #C0C0C0;
  --color-text-muted: #B0B0B0;

  --color-border: rgba(255, 255, 255, 0.08);
  --color-border-hover: rgba(255, 255, 255, 0.15);
  --color-border-active: rgba(123, 167, 166, 0.45);
  --color-border-light: rgba(255, 255, 255, 0.05);
}

/* ── 浅色: "莫奈的清晨" ── */
[data-theme="light"] {
  --color-bg-page: #F9F8F4;
  --color-bg-canvas: #F9F8F4;
  --color-bg-card: rgba(255, 255, 255, 0.7);
  --color-bg-card-hover: rgba(255, 255, 255, 0.9);
  --color-bg-glass: rgba(255, 255, 255, 0.6);
  --color-bg-input: rgba(0, 0, 0, 0.03);

  --color-text-primary: #2C3E50;
  --color-text-secondary: #4A4A4A;
  --color-text-muted: #6B7280;

  --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.5);
  --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: #2C3E50;
  --monet-shadow: #6B7280;
  --monet-bridge: #A88D6A;
  --monet-iris: #7A5F94;
  --monet-poppy: #C92A3C;
  --monet-gold: #B8942F;
  --monet-water-green: #1F7A6D;
  --monet-code-warm: #E05A5A;
}

/* ── Scoped shadows (override globals) ── */
: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;

  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px;
  --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px;
  --space-16: 64px; --space-20: 80px;

  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 8px 20px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.6);
  --shadow-card: 0 10px 25px -5px rgba(0, 0, 0, 0.5);
  --shadow-card-hover: 0 20px 45px -10px rgba(0, 0, 0, 0.6);
  --shadow-glow: 0 0 20px rgba(123, 167, 166, 0.3);

  --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-full: 75px;

  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

[data-theme="light"] {
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 8px 20px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.1);
  --shadow-card: 0 10px 40px -10px rgba(0, 0, 0, 0.08);
  --shadow-card-hover: 0 16px 50px -12px rgba(0, 0, 0, 0.12);
  --shadow-glow: 0 0 20px rgba(123, 167, 166, 0.15);
}