@charset "utf-8";
/* 主题变量 —— 首页 index.php 与管理后台 admin.php 共用同一套色彩
 *
 * 切换方式：<html data-theme="dark|light">
 *   index.php / admin.php 会按 data/data.json 的 settings.theme 输出该属性；
 *   首页还支持 localStorage('lentsa:theme') 覆盖与右上角按钮手动切换；
 *   两个都没有时，跟随系统 prefers-color-scheme。
 *
 * 变量分三组：
 *   页面级  --bg-primary / --bg-card / --text-* / --border-color
 *   侧栏级  --nav-*（首页右侧目录专用，亮色下自动转为浅底深字）
 *   强调色  --accent-color 主色（青） / --accent-2 → --accent-3 渐变（蓝）
 */

:root,
[data-theme="dark"] {
  /* 让浏览器原生控件（滚动条、表单、日期选择等）跟随暗色 */
  color-scheme: dark;

  --bg-primary: #162035;
  --bg-secondary: rgba(255, 255, 255, .05);
  --bg-card: rgba(255, 255, 255, .08);
  --bg-card-hover: rgba(255, 255, 255, .12);
  --text-primary: #fff;
  --text-secondary: rgba(255, 255, 255, .7);
  --text-muted: rgba(255, 255, 255, .5);
  --border-color: rgba(255, 255, 255, .12);
  --field-bg: rgba(255, 255, 255, .06);
  --field-bg-focus: #293550;
  --shadow: 0 8px 32px rgba(0, 0, 0, .3);

  --accent-color: #00bcd4;
  --accent-2: #2196f3;
  --accent-3: #54affd;

  /* 首页右侧目录 */
  --nav-bg: #222d46;
  --nav-item-bg: #293550;
  --nav-text: #fff;
  --nav-title: #fff;
  --nav-shadow: rgba(0, 40, 70, .3);

  /* 图片图标：图标本身可能是纯白或纯黑，用中性底 + 对比描边保证两种主题下都看得见 */
  --icon-plate: rgba(255, 255, 255, .10);
  --icon-ring: rgba(255, 255, 255, .45);
}

[data-theme="light"] {
  color-scheme: light;

  --bg-primary: #f4f6f9;
  --bg-secondary: rgba(255, 255, 255, .8);
  --bg-card: #fff;
  --bg-card-hover: #fff;
  --text-primary: #1a1a2e;
  --text-secondary: rgba(26, 26, 46, .7);
  --text-muted: rgba(26, 26, 46, .5);
  --border-color: rgba(0, 0, 0, .08);
  --field-bg: #fff;
  --field-bg-focus: #fff;
  --shadow: 0 8px 32px rgba(0, 0, 0, .1);

  --nav-bg: #e8ecf3;
  --nav-item-bg: #fff;
  --nav-text: #1a1a2e;
  --nav-title: #1a1a2e;
  --nav-shadow: rgba(0, 40, 70, .12);

  --icon-plate: rgba(0, 0, 0, .06);
  --icon-ring: rgba(0, 0, 0, .5);
}

/* 未显式指定主题时跟随系统 */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]):not([data-theme="light"]) {
    color-scheme: light;

    --bg-primary: #f4f6f9;
    --bg-secondary: rgba(255, 255, 255, .8);
    --bg-card: #fff;
    --bg-card-hover: #fff;
    --text-primary: #1a1a2e;
    --text-secondary: rgba(26, 26, 46, .7);
    --text-muted: rgba(26, 26, 46, .5);
    --border-color: rgba(0, 0, 0, .08);
    --field-bg: #fff;
    --field-bg-focus: #fff;
    --shadow: 0 8px 32px rgba(0, 0, 0, .1);

    --nav-bg: #e8ecf3;
    --nav-item-bg: #fff;
    --nav-text: #1a1a2e;
    --nav-title: #1a1a2e;
    --nav-shadow: rgba(0, 40, 70, .12);

    --icon-plate: rgba(0, 0, 0, .06);
    --icon-ring: rgba(0, 0, 0, .5);
  }
}

/* 通用尺寸与动效（两侧一致） */
:root {
  --radius: 16px;
  --radius-sm: 10px;
  --danger: #f5576c;
  --transition: all .3s cubic-bezier(.4, 0, .2, 1);
}