/* Design tokens for 德译智 — modern neutral palette with deep blue accent */

/* === Light Theme === */
:root {
  /* Neutral base (Slate/Zinc inspired) */
  --color-bg: #fafbfc;
  --color-surface: #ffffff;
  --color-text: #1a1a1e;
  --color-text-secondary: #4a4a52;
  --color-text-muted: #6b6b78;
  --color-border: rgba(0,0,0,0.05);
  --color-border-hover: rgba(0,0,0,0.10);

  /* Accent */
  --color-primary: #2563eb;
  --color-primary-hover: #1d4ed8;
  --color-primary-light: #eff6ff;
  --color-primary-glow: rgba(37,99,235,0.08);

  /* Feedback colors */
  --color-success: #16a34a;
  --color-success-bg: #f0fdf4;
  --color-warning: #ea580c;
  --color-warning-bg: #fff7ed;
  --color-error: #dc2626;
  --color-error-bg: #fef2f2;

  /* Heatmap */
  --heatmap-0: #f1f5f9;
  --heatmap-1: #dbeafe;
  --heatmap-2: #93bbfd;
  --heatmap-3: #3b82f6;
  --heatmap-4: #1d4ed8;

  color-scheme: light;
}

/* === Dark Theme === */
[data-theme="dark"] {
  --color-bg: #0f0f12;
  --color-surface: #1e1e24;
  --color-text: #e4e4e7;
  --color-text-secondary: #a0a0a8;
  --color-text-muted: #80868b;
  --color-border: rgba(255,255,255,0.06);
  --color-border-hover: rgba(255,255,255,0.12);

  --color-primary: #3b82f6;
  --color-primary-hover: #60a5fa;
  --color-primary-light: rgba(59,130,246,0.12);
  --color-primary-glow: rgba(59,130,246,0.10);

  --color-success: #22c55e;
  --color-success-bg: rgba(34,197,94,0.10);
  --color-warning: #f97316;
  --color-warning-bg: rgba(249,115,22,0.10);
  --color-error: #ef4444;
  --color-error-bg: rgba(239,68,68,0.10);

  --heatmap-0: #1e1e24;
  --heatmap-1: #1e3050;
  --heatmap-2: #1e4a80;
  --heatmap-3: #3b82f6;
  --heatmap-4: #60a5fa;

  color-scheme: dark;
}

/* === CEFR Level Badge Colors === */
:root {
  --level-a1-bg: #e8f5e9; --level-a1-text: #2e7d32;
  --level-a2-bg: #e3f2fd; --level-a2-text: #1565c0;
  --level-b1-bg: #fff3e0; --level-b1-text: #e65100;
  --level-b2-bg: #fce4ec; --level-b2-text: #c62828;
}
[data-theme="dark"] {
  --level-a1-bg: rgba(46,125,50,0.2); --level-a1-text: #66bb6a;
  --level-a2-bg: rgba(21,101,192,0.2); --level-a2-text: #64b5f6;
  --level-b1-bg: rgba(230,81,0,0.2); --level-b1-text: #ffb74d;
  --level-b2-bg: rgba(198,40,40,0.2); --level-b2-text: #ef5350;
}

/* === POS (Part of Speech) Tag Colors === */
:root {
  --pos-noun-bg: #e8f0fe; --pos-noun-text: #1a56db;
  --pos-verb-bg: #fce8e6; --pos-verb-text: #c5221f;
  --pos-adj-bg: #e8f5e9; --pos-adj-text: #1e8e3e;
  --pos-adv-bg: #f3e8fd; --pos-adv-text: #7c3aed;
  --pos-other-bg: #f1f3f4; --pos-other-text: #5f6368;
}
[data-theme="dark"] {
  --pos-noun-bg: rgba(66,133,244,0.18); --pos-noun-text: #8ab4f8;
  --pos-verb-bg: rgba(234,67,53,0.18); --pos-verb-text: #f28b82;
  --pos-adj-bg: rgba(52,168,83,0.18); --pos-adj-text: #81c995;
  --pos-adv-bg: rgba(147,51,234,0.18); --pos-adv-text: #b388ff;
  --pos-other-bg: rgba(255,255,255,0.08); --pos-other-text: #9aa0a6;
}

/* === Gender Colors === */
:root {
  --gender-masculine: #1a56db;
  --gender-feminine: #c5221f;
  --gender-neuter: #1e8e3e;
}
[data-theme="dark"] {
  --gender-masculine: #8ab4f8;
  --gender-feminine: #f28b82;
  --gender-neuter: #81c995;
}

/* === Backward-compatible aliases === */
:root {
  --primary: var(--color-primary);
  --primary-hover: var(--color-primary-hover);
  --primary-light: var(--color-primary-light);
  --primary-glow: var(--color-primary-glow);
  --bg: var(--color-bg);
  --surface: var(--color-surface);
  --text: var(--color-text);
  --text-secondary: var(--color-text-secondary);
  --text-muted: var(--color-text-muted);
  --border: var(--color-border);
  --border-hover: var(--color-border-hover);
  color-scheme: light;
}
[data-theme="dark"] {
  --primary: var(--color-primary);
  --primary-hover: var(--color-primary-hover);
  --primary-light: var(--color-primary-light);
  --primary-glow: var(--color-primary-glow);
  --bg: var(--color-bg);
  --surface: var(--color-surface);
  --text: var(--color-text);
  --text-secondary: var(--color-text-secondary);
  --text-muted: var(--color-text-muted);
  --border: var(--color-border);
  --border-hover: var(--color-border-hover);
  color-scheme: dark;
}

/* === Typography === */
:root {
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, "Noto Sans", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-mono: "SF Mono", "Fira Code", "Cascadia Code", monospace;
  --font: var(--font-sans);
}

/* === Spacing scale === */
:root {
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
}

/* === Border radii === */
:root {
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 24px;
}

/* === Shadows === */
:root {
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.04), 0 0 0 1px rgba(0,0,0,0.02);
  --shadow-md: 0 4px 20px rgba(0,0,0,0.06), 0 0 0 1px rgba(0,0,0,0.04);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.04);
}
[data-theme="dark"] {
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.20), 0 0 0 1px rgba(255,255,255,0.04);
  --shadow-md: 0 4px 20px rgba(0,0,0,0.30), 0 0 0 1px rgba(255,255,255,0.04);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.40), 0 0 0 1px rgba(255,255,255,0.04);
}

/* === Motion === */
:root {
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition: var(--transition-base);
  --transition-slow: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* === Icons & extras === */
:root {
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235f6368' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
[data-theme="dark"] {
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a0a0a8' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}