/* variables.css */
:root {
  /* =========================================
     1. 颜色系统 (深色主题基准)
     ========================================= */
  
  /* 1.1 主色调 (深空蓝) - 用于背景层级 */
  --color-primary-950: hsl(230, 45%, 8%);    /* html, body 最深底色 */
  --color-primary-900: hsl(230, 45%, 12%);   /* 主容器底色 */
  --color-primary-800: hsl(230, 40%, 18%);   /* 侧边栏/次要容器 */
  --color-primary-700: hsl(230, 40%, 22%);   /* 基础卡片背景 */
  --color-primary-600: hsl(230, 35%, 30%);   /* 悬停态卡片/边框 */
  
  /* 1.2 强调色 */
  --color-accent-500: hsl(225, 55%, 45%);    /* 品牌主强调色 */
  --color-accent-400: hsl(225, 60%, 55%);    /* 按钮 hover */
  --color-accent-300: hsl(220, 60%, 65%);    /* 链接文字 */
  
  /* 1.3 文本颜色 */
  --text-primary: hsla(210, 20%, 98%, 0.95); /* 正文标题 */
  --text-regular: hsla(210, 15%, 90%, 0.85); /* 长段落正文 */
  --text-muted: hsla(210, 10%, 75%, 0.65);   /* 注释、次要信息 */
  
  /* 1.4 角色专属色 */
  --color-sister-base: hsl(340, 75%, 60%);   /* 姐姐·玫瑰粉 */
  --color-sister-bg: hsla(340, 60%, 25%, 0.9); /* 姐姐气泡底色 */
  --color-sister-border: hsl(340, 50%, 45%);
  
  --color-younger-base: hsl(45, 90%, 55%);   /* 妹妹·金黄 */
  --color-younger-bg: hsla(45, 80%, 20%, 0.9); /* 妹妹气泡底色 */
  --color-younger-border: hsl(45, 70%, 40%);

  /* 1.5 四色盒子 (概念卡片) */
  --box-blue-bg: hsla(210, 70%, 50%, 0.15);
  --box-blue-border: hsl(210, 70%, 50%);
  
  --box-green-bg: hsla(145, 60%, 42%, 0.15);
  --box-green-border: hsl(145, 60%, 42%);
  
  --box-orange-bg: hsla(30, 85%, 55%, 0.15);
  --box-orange-border: hsl(30, 85%, 55%);
  
  --box-gray-bg: hsla(220, 10%, 55%, 0.15);
  --box-gray-border: hsl(220, 10%, 55%);

  /* 1.6 反馈与状态色 */
  --color-correct: hsl(150, 70%, 45%);       /* 答对 */
  --color-correct-bg: hsla(150, 70%, 45%, 0.15);
  
  --color-wrong: hsl(0, 70%, 55%);           /* 答错 */
  --color-wrong-bg: hsla(0, 70%, 55%, 0.15);
  
  --color-star: hsl(45, 100%, 55%);          /* 经验值/星星 */
  
  /* =========================================
     2. 间距系统 (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;

  /* =========================================
     3. 排版系统
     ========================================= */
  --font-family-base: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --font-family-math: 'KaTeX_Main', 'Times New Roman', serif;
  
  /* 字号阶梯 */
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 17px;    /* 正文基础字号，适合小学生阅读 */
  --text-lg: 18px;      /* 公式基础字号 */
  --text-xl: 22px;      /* 小节标题 */
  --text-2xl: 28px;     /* 章节大标题 */
  --text-3xl: 36px;     /* 封面大标题 */
  
  /* 行高 */
  --leading-none: 1;
  --leading-tight: 1.3;
  --leading-snug: 1.4;
  --leading-normal: 1.6;
  --leading-loose: 1.85; /* 正文行高，保证易读性 */
  
  /* 字重 */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;

  /* =========================================
     4. 边框与圆角系统
     ========================================= */
  --radius-sm: 8px;
  --radius-md: 12px;    /* 按钮、小卡片 */
  --radius-lg: 16px;    /* 核心内容卡片 */
  --radius-xl: 24px;    /* 模态框、对话气泡外侧 */
  --radius-full: 9999px; /* 头像、胶囊按钮 */

  /* =========================================
     5. 阴影系统
     ========================================= */
  /* 深色模式下的阴影主要由更深的背景色及透明度构成 */
  --shadow-sm: 0 2px 8px hsla(230, 50%, 5%, 0.4);
  --shadow-md: 0 4px 16px hsla(230, 50%, 5%, 0.5); /* 卡片阴影 */
  --shadow-lg: 0 8px 32px hsla(230, 50%, 5%, 0.6); /* 浮层/模态框 */
  
  /* 发光效果 (用于高亮或正确反馈) */
  --glow-primary: 0 0 15px hsla(225, 60%, 55%, 0.4);
  --glow-correct: 0 0 15px hsla(150, 70%, 45%, 0.4);
  --glow-star: 0 0 20px hsla(45, 100%, 55%, 0.5);

  /* =========================================
     6. 动画缓动函数 (Ease Curves)
     ========================================= */
  --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1); /* 弹跳出现 (气泡/卡片) */
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);        /* 通用平滑过渡 */
  --ease-out: cubic-bezier(0, 0, 0.2, 1);             /* 元素离开 */
  --duration-fast: 150ms;
  --duration-normal: 300ms;
  --duration-slow: 500ms;
}

/* 亮色主题变体 (通过在 html 标签切换 .light-theme 类触发) */
.light-theme {
  --color-primary-950: hsl(210, 20%, 98%);
  --color-primary-900: hsl(210, 20%, 95%);
  --color-primary-800: hsl(210, 15%, 90%);
  --color-primary-700: hsl(0, 0%, 100%);
  --color-primary-600: hsl(210, 15%, 85%);
  
  --text-primary: hsl(230, 30%, 15%);
  --text-regular: hsl(230, 20%, 30%);
  --text-muted: hsl(230, 10%, 45%);
  
  --shadow-md: 0 4px 16px hsla(230, 20%, 60%, 0.15);
  --shadow-lg: 0 8px 32px hsla(230, 20%, 60%, 0.25);
}