/* ============================================================
   KANAU · Design Tokens
   全站共用的颜色、字体、圆角、阴影变量。
   所有页面 CSS 应在文件顶部 @import 这份文件，
   并优先使用下面的变量，而不是硬编码色值。
   ============================================================ */

:root {
    /* ---------- 品牌色 ---------- */
    --kanau-brand-deep: #1F3D2E;
    --kanau-brand-deep-dark: #16281F;
    --kanau-brand-sage: #7F9A82;

    /* ---------- 背景色 ---------- */
    --kanau-bg-light-green: #EAF2E9;
    --kanau-bg-cream: #FBF8F2;
    --kanau-bg-dark: #1C1A17;

    /* ---------- 强调色 ---------- */
    --kanau-accent-pinecone: #C97B4A;
    --kanau-accent-pinecone-light: #F3D9C4;
    --kanau-accent-gold: #E8A558;

    /* ---------- 文字色 ---------- */
    --kanau-text-body: #2A332C;
    --kanau-text-muted: #6B7A6D;
    --kanau-text-on-dark: #FBF8F2;

    /* ---------- 边框/分割线 ---------- */
    --kanau-border-soft: #D8E3D9;
    --kanau-border-dark: rgba(251,248,242,0.16);

    /* ---------- 语义色（保留现有功能色，未改动） ---------- */
    --kanau-state-wrong: #e74c3c;
    --kanau-state-review: #f1c40f;
    --kanau-state-perfect: #2ecc71;

    /* ---------- 圆角 ---------- */
    --kanau-radius-card: 20px;
    --kanau-radius-sm: 12px;
    --kanau-radius-pill: 999px;

    /* ---------- 阴影 ---------- */
    --kanau-shadow-soft: 0 2px 12px rgba(31, 61, 46, 0.06);

    /* ---------- 字体 ---------- */
    --kanau-font-display: 'Space Grotesk', 'Hiragino Kaku Gothic ProN', sans-serif;
    --kanau-font-body: 'Inter', 'Hiragino Kaku Gothic ProN', sans-serif;
    --kanau-font-mono: 'IBM Plex Mono', monospace;

    /* ============================================================
       向后兼容别名 —— 让现有代码里的旧变量名继续可用
       ============================================================ */
    --primary: var(--kanau-brand-sage);
    --bg-color: var(--kanau-bg-cream);
    --text-main: var(--kanau-text-body);
    --border-color: var(--kanau-border-soft);
    --card-bg: rgba(255, 255, 255, 0.94);

    --paper: var(--kanau-bg-cream);
    --ink: var(--kanau-text-body);
    --terracotta: var(--kanau-accent-pinecone);
    --forest: var(--kanau-brand-sage);
    --gold: var(--kanau-accent-gold);
    --glass: rgba(255, 255, 255, 0.7);
    --glass-border: rgba(255, 255, 255, 0.4);

    --wrong-color: var(--kanau-state-wrong);
    --review-color: var(--kanau-state-review);
    --perfect-color: var(--kanau-state-perfect);
}