/* ====================================
   日语学习网站 — CSS 变量系统
   支持亮色/暗色模式
   ==================================== */

:root {
  /* 背景 */
  --bg-primary: #FAF8F5;
  --bg-card: #FFFFFF;
  --bg-card-hover: #F5F3F0;
  --bg-overlay: rgba(0, 0, 0, 0.4);

  /* 文字 */
  --text-primary: #2C2C2C;
  --text-secondary: #6B6B6B;
  --text-tertiary: #9A9A9A;
  --text-inverse: #FFFFFF;

  /* 功能色 */
  --color-primary: #5B8C5A;      /* 草绿 — 主强调 */
  --color-primary-light: #E8F0E8;
  --color-accent: #C97B4A;       /* 柿色 — 假名高亮 */
  --color-accent-light: #F5EDE6;
  --color-success: #5B8C5A;      /* 正确 */
  --color-error: #C75B5B;        /* 朱红 — 错误 */
  --color-error-light: #F5E8E8;
  --color-info: #6B7FB5;         /* 蓝灰 — 听力/音频 */
  --color-info-light: #E8EDF5;

  /* 边框与分割线 */
  --border-light: #E8E5E0;
  --border-medium: #D5D0C8;

  /* 阴影 */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.1);

  /* 圆角 */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;

  /* 间距 */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;

  /* 字体 */
  --font-jp: 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', sans-serif;
  --font-jp-serif: 'Noto Serif JP', serif;
  --font-cn: -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --font-ui: -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --font-mono: 'SF Mono', 'Fira Code', monospace;

  /* 进度条 */
  --progress-bg: #E8E5E0;
  --progress-fill: linear-gradient(90deg, #5B8C5A, #C97B4A);

  /* 过渡 */
  --transition-fast: 150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow: 400ms ease;

  /* 内容区最大宽度 */
  --content-max-width: 480px;
  --content-padding: 20px;
}

/* 暗色模式 */
[data-theme="dark"] {
  --bg-primary: #1A1A1E;
  --bg-card: #242428;
  --bg-card-hover: #2E2E32;
  --bg-overlay: rgba(0, 0, 0, 0.6);

  --text-primary: #E8E8E8;
  --text-secondary: #9A9A9A;
  --text-tertiary: #6B6B6B;

  --color-primary: #7BAF7A;
  --color-primary-light: #2A352A;
  --color-accent: #D99B6C;
  --color-accent-light: #352A22;
  --color-success: #7BAF7A;
  --color-error: #D97B7B;
  --color-error-light: #352222;
  --color-info: #8B9FD5;
  --color-info-light: #222A35;

  --border-light: #333336;
  --border-medium: #444448;

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.25);
  --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.3);

  --progress-bg: #333336;
}

/* 跟随系统暗色 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg-primary: #1A1A1E;
    --bg-card: #242428;
    --bg-card-hover: #2E2E32;
    --bg-overlay: rgba(0, 0, 0, 0.6);

    --text-primary: #E8E8E8;
    --text-secondary: #9A9A9A;
    --text-tertiary: #6B6B6B;

    --color-primary: #7BAF7A;
    --color-primary-light: #2A352A;
    --color-accent: #D99B6C;
    --color-accent-light: #352A22;
    --color-success: #7BAF7A;
    --color-error: #D97B7B;
    --color-error-light: #352222;
    --color-info: #8B9FD5;
    --color-info-light: #222A35;

    --border-light: #333336;
    --border-medium: #444448;

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.25);
    --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.3);

    --progress-bg: #333336;
  }
}