/* ============================================================

 * 二建备考 Wiki · Design Tokens (P0)

 * 风格：Notion 温润浅色 / 学者书卷气 / 内容优先

 * 命名：语义化 (surface / text / accent / state)

 * ============================================================ */



:root {

  /* ============================================

   * 1. 中性色阶 (Stone Scale)

   * 偏暖的中性色，告别冷蓝灰，更接近书页质感

   * ============================================ */

  --stone-0:   #FFFFFF;

  --stone-50:  #FAFAF7;   /* Notion 经典米白 - 页面底色 */

  --stone-100: #F4F3EF;   /* 卡片底/区块底 */

  --stone-150: #ECEBE6;

  --stone-200: #E3E1DB;   /* 分隔线/边框 */

  --stone-300: #D1CFC8;

  --stone-400: #A8A6A0;   /* 占位 */

  --stone-500: #797873;   /* 三级文字 */

  --stone-600: #57564F;   /* 二级文字 */

  --stone-700: #3F3E3A;   /* 一级文字 */

  --stone-800: #2C2B28;   /* 标题 */

  --stone-900: #1A1A18;   /* 最深 */



  /* ============================================

   * 2. 品牌色 (Brand)

   * Notion 蓝偏紫的"学者靛"，书卷气更足

   * ============================================ */

  --brand-50:  #EEF0FF;

  --brand-100: #D9DEFE;

  --brand-200: #B6BEFD;

  --brand-300: #8E9BFB;

  --brand-400: #6B7AF6;

  --brand-500: #5B6FED;   /* 主品牌色 */

  --brand-600: #4451D6;

  --brand-700: #353CB1;

  --brand-800: #2A308C;



  /* ============================================

   * 3. 三科目色 (Subject)

   * 低饱和、高书卷气，用于侧边栏/卡片标识

   * ============================================ */

  --subject-law-bg:    #EEF0FF;   /* 法规·靛 */

  --subject-law-fg:    #4451D6;

  --subject-law-line:  #5B6FED;



  --subject-mgmt-bg:   #E0F5F1;   /* 管理·青 */

  --subject-mgmt-fg:   #0F8C76;

  --subject-mgmt-line: #14B8A6;



  --subject-prac-bg:   #FBF0E0;   /* 实务·琥珀 */

  --subject-prac-fg:   #B45309;

  --subject-prac-line: #F59E0B;



  /* ============================================

   * 4. 高亮色 (Highlight) - 笔记四色预埋

   * Notion 风荧光笔效果

   * ============================================ */

  --hl-yellow-bg:  #FEF3C7;

  --hl-yellow-fg:  #92400E;

  --hl-green-bg:   #D1FAE5;

  --hl-green-fg:   #065F46;

  --hl-blue-bg:    #DBEAFE;

  --hl-blue-fg:    #1E40AF;

  --hl-red-bg:     #FEE2E2;

  --hl-red-fg:     #991B1B;



  /* ============================================

   * 5. 语义色 (Semantic)

   * ============================================ */

  --success-50:  #ECFDF5;

  --success-500: #10B981;

  --success-700: #047857;



  --warning-50:  #FFFBEB;

  --warning-500: #F59E0B;

  --warning-700: #B45309;



  --danger-50:   #FEF2F2;

  --danger-500:  #EF4444;

  --danger-700:  #B91C1C;



  --info-50:     #EFF6FF;

  --info-500:    #3B82F6;

  --info-700:    #1D4ED8;



  /* ============================================

   * 6. 表面色 (Surface) - 语义化映射

   * 组件应优先使用这一层，便于换主题

   * ============================================ */

  --surface-page:      var(--stone-50);    /* 页面底色 */

  --surface-base:      var(--stone-0);     /* 卡片/正文容器 */

  --surface-raised:    var(--stone-0);     /* 浮起卡片 */

  --surface-sunken:    var(--stone-100);   /* 凹陷区域(代码块/引用) */

  --surface-overlay:   rgba(255,255,255,0.85); /* 浮层底(配毛玻璃) */

  --surface-hover:     var(--stone-100);

  --surface-active:    var(--stone-150);

  --surface-selected:  var(--brand-50);



  /* ============================================

   * 7. 文字色 (Text)

   * ============================================ */

  --text-strong:   var(--stone-800);   /* 标题 */

  --text-body:     var(--stone-700);   /* 正文 */

  --text-muted:    var(--stone-600);   /* 次要 */

  --text-subtle:   var(--stone-500);   /* 三级 */

  --text-faint:    var(--stone-400);   /* 占位 */

  --text-inverse:  #FFFFFF;

  --text-accent:   var(--brand-600);

  --text-link:     var(--brand-600);

  --text-link-hover: var(--brand-700);



  /* ============================================

   * 8. 边框色 (Border)

   * ============================================ */

  --border-subtle:  var(--stone-150);

  --border-default: var(--stone-200);

  --border-strong:  var(--stone-300);

  --border-focus:   var(--brand-400);



  /* ============================================

   * 9. 字体 (Typography)

   * ============================================ */

  --font-sans:

    -apple-system, BlinkMacSystemFont,

    "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei",

    "Segoe UI", "Inter", system-ui, sans-serif;



  --font-serif:

    "Noto Serif SC", "Source Han Serif SC", "Songti SC",

    "STSong", "SimSun", Georgia, serif;



  --font-mono:

    "JetBrains Mono", "Fira Code", "Cascadia Code",

    "SF Mono", Menlo, Consolas, "Courier New", monospace;



  /* 字阶 (8 级，统一节奏) */

  --text-xs:   12px;    --lh-xs:   18px;

  --text-sm:   13px;    --lh-sm:   20px;

  --text-base: 17px;    --lh-base: 30px;   /* 正文 - 中文舒适阅读 */

  --text-md:   16px;    --lh-md:   28px;

  --text-lg:   18px;    --lh-lg:   30px;

  --text-xl:   22px;    --lh-xl:   32px;

  --text-2xl:  28px;    --lh-2xl:  38px;

  --text-3xl:  36px;    --lh-3xl:  46px;

  --text-4xl:  44px;    --lh-4xl:  56px;



  /* 字重 */

  --weight-normal: 400;

  --weight-medium: 500;

  --weight-semibold: 600;

  --weight-bold: 700;



  /* ============================================

   * 10. 间距 (Spacing) - 4px 网格

   * ============================================ */

  --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;

  --space-16: 64px;

  --space-20: 80px;



  /* ============================================

   * 11. 圆角 (Radius)

   * ============================================ */

  --radius-xs: 4px;

  --radius-sm: 6px;

  --radius-md: 8px;     /* 默认 */

  --radius-lg: 12px;    /* 卡片 */

  --radius-xl: 16px;

  --radius-2xl: 20px;

  --radius-full: 9999px;



  /* ============================================

   * 12. 阴影 (Shadow) - 极轻

   * ============================================ */

  --shadow-xs: 0 1px 1px rgba(15, 14, 12, 0.04);

  --shadow-sm: 0 1px 2px rgba(15, 14, 12, 0.06),

               0 1px 1px rgba(15, 14, 12, 0.04);

  --shadow-md: 0 4px 8px -2px rgba(15, 14, 12, 0.08),

               0 2px 4px -1px rgba(15, 14, 12, 0.04);

  --shadow-lg: 0 12px 24px -4px rgba(15, 14, 12, 0.10),

               0 4px 8px -2px rgba(15, 14, 12, 0.04);

  --shadow-xl: 0 20px 40px -8px rgba(15, 14, 12, 0.16);

  --shadow-focus: 0 0 0 3px rgba(91, 111, 237, 0.18);



  /* ============================================

   * 13. 动画 (Motion)

   * ============================================ */

  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);

  --ease-in:    cubic-bezier(0.7, 0, 0.84, 0);

  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);



  --duration-fast: 150ms;

  --duration-base: 220ms;

  --duration-slow: 360ms;



  /* ============================================

   * 14. 布局 (Layout)

   * ============================================ */

  --layout-sidebar-w: 240px;

  --layout-toc-w: 160px;           /* 右侧 TOC 槽宽度（永久预留，使正文严格居中） */

  --layout-toc-gap: 12px;          /* TOC 与正文之间的安全间距 */

  --layout-content-max: 920px;   /* 章节阅读黄金宽度（17px 中文 ≈ 32 字/行） */

  --layout-content-max-wide: 1000px; /* 首页/进度等仪表盘类宽度 */

  --layout-content-pad: 24px;    /* 大屏左右内边距 */

  --layout-nav-h: 56px;



  /* z-index 体系 */

  --z-base: 1;

  --z-sticky: 100;

  --z-sidebar: 200;

  --z-overlay: 800;

  --z-modal: 900;

  --z-tooltip: 1000;

  --z-toast: 1100;



  /* ============================================

   * 15. 旧变量兼容映射 (Legacy Bridge)

   * 旧 CSS 文件继续工作，过渡期保留

   * ============================================ */

  --bg-primary:   var(--surface-base);

  --bg-secondary: var(--surface-page);

  --bg-tertiary:  var(--surface-sunken);

  --bg-card:      var(--surface-base);



  --text-primary:   var(--text-strong);

  --text-secondary: var(--text-body);

  --text-tertiary:  var(--text-subtle);

  --text-inverse:   #FFFFFF;



  --border-light:  var(--border-subtle);

  --border-medium: var(--border-default);



  --color-bg-primary:   var(--surface-base);

  --color-bg-secondary: var(--surface-page);

  --color-bg-tertiary:  var(--surface-sunken);

  --color-bg-card:      var(--surface-base);

  --color-text-primary:   var(--text-strong);

  --color-text-secondary: var(--text-body);

  --color-text-tertiary:  var(--text-subtle);

  --color-text-inverse:   #FFFFFF;

  --color-border-light:  var(--border-subtle);

  --color-border-medium: var(--border-default);

  --color-primary:       var(--brand-500);

  --color-primary-light: var(--brand-400);

  --color-primary-dark:  var(--brand-700);

  --color-success: var(--success-500);

  --color-warning: var(--warning-500);

  --color-danger:  var(--danger-500);



  --theme-blue:   var(--brand-500);

  --theme-green:  var(--success-500);

  --theme-orange: var(--warning-500);

  --theme-red:    var(--danger-500);



  --transition-fast: var(--duration-fast) var(--ease-out);

  --transition-base: var(--duration-base) var(--ease-out);

  --transition-slow: var(--duration-slow) var(--ease-out);

}