/* ==========================================================================
   简教 · 设计令牌 (Design Tokens)
   配色取自参考库（Luma）：苔藓绿品牌色 + 柔和环境光晕 + 玻璃表面。
   所有颜色、间距、圆角、阴影的唯一来源。切换主题只改这里的变量。
   ========================================================================== */

:root {
  color-scheme: light;

  /* ---- 品牌色：苔藓绿（唯一品牌锚点） ---- */
  --brand-50: #eff8ed;
  --brand-100: #dceed8;
  --brand-200: #bbdcb4;
  --brand-300: #93c089;
  --brand-400: #73a967;
  --brand-500: #3b7a2c;
  --brand-600: #2c6b1c;
  --brand-700: #214f16;
  --brand-800: #15340e;
  --brand-900: #0d1d0a;

  /* ---- 语义色 ---- */
  --success-50: #eff8ed;
  --success-100: #dceed8;
  --success-200: #bbdcb4;
  --success-500: #3b7a2c;
  --success-600: #2c6b1c;
  --success-700: #214f16;

  --warning-50: #fff7e6;
  --warning-100: #ffe7bb;
  --warning-300: #f2b966;
  --warning-500: #cb8315;
  --warning-600: #a8640c;
  --warning-700: #764100;

  --danger-50: #fff1ef;
  --danger-100: #ffdedb;
  --danger-300: #f6a9a3;
  --danger-500: #d42f34;
  --danger-600: #b31221;
  --danger-700: #8d0f1b;

  --info-50: #ecf7ff;
  --info-100: #d0ecff;
  --info-300: #79bdff;
  --info-500: #1480d7;
  --info-600: #0f68b4;
  --info-700: #004e93;

  --violet-50: #f7f1ff;
  --violet-100: #f2e9ff;
  --violet-300: #c4a4fe;
  --violet-500: #8962c5;
  --violet-700: #593888;

  /* ---- 中性色（轻微向 140° 染色） ---- */
  --neutral-0: #ffffff;
  --neutral-25: #f9fbf9;
  --neutral-50: #f3f5f2;
  --neutral-100: #e9ece8;
  --neutral-200: #d8dcd7;
  --neutral-300: #bec3bc;
  --neutral-400: #949a93;
  --neutral-500: #5c625b;
  --neutral-600: #4c524b;
  --neutral-700: #323731;
  --neutral-800: #1c211b;
  --neutral-900: #0b0e0b;

  /* ---- 环境光晕（页面背景与按钮后面的弥散光） ---- */
  --glow-moss: rgba(185, 221, 177, 0.45);
  --glow-amber: rgba(255, 204, 121, 0.32);
  --glow-blue: rgba(121, 189, 255, 0.34);
  --glow-violet: rgba(196, 164, 254, 0.34);
  --glow-rose: rgba(255, 160, 164, 0.4);

  /* ---- 表面与文字 ---- */
  --surface-canvas: #ffffff;
  --surface-raised: rgba(255, 255, 255, 0.82);
  --surface-solid: #ffffff;
  --surface-muted: rgba(243, 245, 242, 0.9);
  --surface-sunken: rgba(233, 236, 232, 0.75);
  --surface-inverse: #0b0e0b;
  --surface-glass: rgba(255, 255, 255, 0.74);
  --surface-glass-soft: rgba(255, 255, 255, 0.56);
  --surface-hero: linear-gradient(135deg, rgba(239, 248, 237, 0.92) 0%, rgba(242, 233, 255, 0.86) 52%, rgba(236, 247, 255, 0.9) 100%);

  --text-strong: #0f130e;
  --text-default: #1c211b;
  --text-muted: #444a43;
  --text-subtle: #5f655e;
  --text-inverse: #ffffff;

  --border-subtle: rgba(11, 14, 11, 0.07);
  --border-default: rgba(11, 14, 11, 0.12);
  --border-strong: rgba(11, 14, 11, 0.2);
  --border-glass: rgba(255, 255, 255, 0.62);

  /* ---- 语义别名 ---- */
  --brand: var(--brand-500);
  --brand-hover: var(--brand-600);
  --brand-soft: var(--brand-50);
  --brand-subtle: var(--brand-100);
  --brand-ink: var(--brand-800);
  --focus-ring: rgba(59, 122, 44, 0.28);

  /* ---- 圆角 ---- */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-pill: 999px;

  /* ---- 阴影 ---- */
  --shadow-xs: 0 1px 2px rgba(11, 14, 11, 0.05);
  --shadow-sm: 0 1px 3px rgba(11, 14, 11, 0.07), 0 1px 2px rgba(11, 14, 11, 0.04);
  --shadow-md: 0 4px 8px -2px rgba(11, 14, 11, 0.1), 0 2px 4px -2px rgba(11, 14, 11, 0.06);
  --shadow-lg: 0 12px 16px -4px rgba(11, 14, 11, 0.08), 0 4px 6px -2px rgba(11, 14, 11, 0.03);
  --shadow-xl: 0 20px 24px -4px rgba(11, 14, 11, 0.1), 0 8px 8px -4px rgba(11, 14, 11, 0.04);
  --shadow-focus: 0 0 0 3px var(--focus-ring);
  --shadow-brand: 0 8px 22px rgba(59, 122, 44, 0.3);
  --shadow-glass-inset: inset 0 1px rgba(255, 255, 255, 0.7);

  /* ---- 间距 ---- */
  --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;

  /* ---- 字号 ---- */
  --text-xs: 12px;
  --text-sm: 13px;
  --text-md: 14px;
  --text-base: 15px;
  --text-lg: 17px;
  --text-xl: 20px;
  --text-2xl: 26px;
  --text-3xl: 32px;

  --leading-tight: 1.28;
  --leading-normal: 1.6;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* ---- 字体 ---- */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", "Hiragino Sans GB", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "Cascadia Code", Menlo, Consolas, "Courier New", monospace;

  /* ---- 尺度 ---- */
  --control-height: 40px;
  --control-height-sm: 32px;
  --sidebar-width: 252px;
  --topbar-height: 64px;
  --content-max: 1240px;

  /* ---- 动效 ---- */
  --duration-fast: 140ms;
  --duration-base: 220ms;
  --duration-slow: 320ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  /* ---- 层级 ---- */
  --z-sticky: 30;
  --z-modal: 60;
  --z-toast: 80;
}

/* ==========================================================================
   深色主题
   ========================================================================== */
:root[data-theme="dark"] {
  color-scheme: dark;

  --brand-50: #16241a;
  --brand-100: #1d3322;
  --brand-200: #2a4a2e;
  --brand-300: #3f6b3f;
  --brand-400: #5f9a5c;
  --brand-500: #7fc07a;
  --brand-600: #9ed89a;
  --brand-700: #bfe6bb;
  --brand-800: #d8f0d5;
  --brand-900: #eaf7e8;

  --success-50: #16241a;
  --success-100: #1d3322;
  --success-200: #2a4a2e;
  --success-500: #7fc07a;
  --success-600: #9ed89a;
  --success-700: #bfe6bb;

  --warning-50: #2c2211;
  --warning-100: #3d2f14;
  --warning-300: #d9a24a;
  --warning-500: #eab866;
  --warning-600: #f2ca80;
  --warning-700: #f8dfa8;

  --danger-50: #2f1618;
  --danger-100: #431e21;
  --danger-300: #e0857f;
  --danger-500: #ef8c85;
  --danger-600: #f5a9a3;
  --danger-700: #fbc8c3;

  --info-50: #12222f;
  --info-100: #18303f;
  --info-300: #6aaede;
  --info-500: #7dbcf0;
  --info-600: #a2d1f5;
  --info-700: #c6e5fa;

  --violet-50: #1e1930;
  --violet-100: #2a2242;
  --violet-300: #a98de0;
  --violet-500: #b79ae8;
  --violet-700: #d3c1f2;

  --neutral-0: #101410;
  --neutral-25: #141813;
  --neutral-50: #181c17;
  --neutral-100: #1e231d;
  --neutral-200: #29302a;
  --neutral-300: #3a423a;
  --neutral-400: #5c625b;
  --neutral-500: #7d857c;
  --neutral-600: #9aa29a;
  --neutral-700: #c0c7be;
  --neutral-800: #dde2db;
  --neutral-900: #f2f5f0;

  --glow-moss: rgba(64, 122, 60, 0.5);
  --glow-amber: rgba(150, 108, 30, 0.45);
  --glow-blue: rgba(40, 96, 160, 0.45);
  --glow-violet: rgba(96, 70, 160, 0.45);
  --glow-rose: rgba(160, 60, 66, 0.45);

  --surface-canvas: #0c0f0c;
  --surface-raised: rgba(24, 28, 23, 0.82);
  --surface-solid: #181c17;
  --surface-muted: rgba(30, 35, 29, 0.85);
  --surface-sunken: rgba(16, 20, 16, 0.6);
  --surface-inverse: #e7ece5;
  --surface-glass: rgba(20, 24, 19, 0.72);
  --surface-glass-soft: rgba(20, 24, 19, 0.5);
  --surface-hero: linear-gradient(135deg, rgba(22, 36, 26, 0.9) 0%, rgba(30, 25, 42, 0.88) 52%, rgba(18, 34, 47, 0.9) 100%);

  --text-strong: #f2f5f0;
  --text-default: #d7ddd4;
  --text-muted: #a3aba1;
  --text-subtle: #7d857c;
  --text-inverse: #101410;

  --border-subtle: rgba(255, 255, 255, 0.07);
  --border-default: rgba(255, 255, 255, 0.12);
  --border-strong: rgba(255, 255, 255, 0.22);
  --border-glass: rgba(255, 255, 255, 0.14);

  --brand: var(--brand-500);
  --brand-hover: var(--brand-600);
  --brand-soft: var(--brand-50);
  --brand-subtle: var(--brand-100);
  --brand-ink: var(--brand-700);
  --focus-ring: rgba(127, 192, 122, 0.38);

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.36);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.44), 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 8px -2px rgba(0, 0, 0, 0.5), 0 2px 4px -2px rgba(0, 0, 0, 0.34);
  --shadow-lg: 0 12px 16px -4px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
  --shadow-xl: 0 20px 24px -4px rgba(0, 0, 0, 0.55), 0 8px 8px -4px rgba(0, 0, 0, 0.36);
  --shadow-brand: 0 8px 22px rgba(0, 0, 0, 0.45);
  --shadow-glass-inset: inset 0 1px rgba(255, 255, 255, 0.12);
}