/* ============================================================
   赤驹原版英语 ReddyColt Edu · AIS 设计令牌 v1.0
   本文件是全品牌唯一的色值/字体/尺寸/动效标准源。
   禁止在此文件之外私自定义设计值；需要新值先改这里再使用。
   用法：网页整站引入本文件；单文件 HTML 课件把 :root 块内联进 <style>。
   ============================================================ */
:root {
  /* ---- 品牌色（源自 Logo，禁止改色）---- */
  --rc-navy:  #17284D;  /* 藏青蓝 Reddy Navy · 品牌第一识别色 · Pantone 2767C */
  --rc-red:   #D83C30;  /* 赤驹红 Colt Red · 点睛/CTA 专用 · Pantone 179C */
  --rc-cream: #F4DCA8;  /* 奶油米黄 Cream · 大面积暖底 · Pantone 7401C */
  --rc-ivory: #FCF3E0;  /* 奶油白 Ivory · 卡片/内容底 · Pantone 9184C */
  --rc-green: #35B36A;  /* 活力绿 Spark Green · 正反馈/星点 · Pantone 7481C */
  --rc-ink:   #1A1A22;  /* 墨黑 Ink · 正文主色 */
  --rc-stone: #6B7280;  /* 石灰 Stone · 次要文字 */

  /* ---- 色阶（浅→深）---- */
  --rc-navy-100: #D1D4DB; --rc-navy-200: #A2A9B8; --rc-navy-300: #747E94;
  --rc-navy-400: #455371; --rc-navy-500: #17284D; --rc-navy-600: #111E3A;
  --rc-red-100: #F7D8D6;  --rc-red-200: #EFB1AC;  --rc-red-300: #E88A83;
  --rc-red-400: #E06359;  --rc-red-500: #D83C30;  --rc-red-600: #AD3026;

  /* ---- 语义色（写代码优先引用这一层，而不是直接用色名）---- */
  --rc-bg-page:   var(--rc-ivory);   /* 页面默认底 */
  --rc-bg-deep:   var(--rc-navy);    /* 深色底：封面/页眉/门头/Tab栏 */
  --rc-bg-warm:   var(--rc-cream);   /* 暖底色块 */
  --rc-bg-card:   #FFFFFF;           /* 卡片底（置于 ivory/cream 上时提亮用白）*/
  --rc-text-main:      var(--rc-ink);
  --rc-text-secondary: var(--rc-stone);
  --rc-text-on-deep:   #FFFFFF;          /* 藏青底上首选白字 */
  --rc-text-on-deep-warm: var(--rc-cream); /* 藏青底上次选米黄字 */
  --rc-cta:       var(--rc-red);     /* 主按钮/重点强调，全局占比≤12% */
  --rc-cta-hover: var(--rc-red-600);
  --rc-success:   var(--rc-green);   /* 正确反馈/星点/小图标，占比≤3% */
  --rc-border-card: #E7DCC4;         /* 卡片米色描边 */

  /* ---- 字体 ---- */
  --rc-font-zh: "Source Han Sans SC","Noto Sans SC","Alibaba PuHuiTi 3.0","PingFang SC","Microsoft YaHei",sans-serif;
  --rc-font-en-display: "Poppins","Nunito",var(--rc-font-zh);  /* 英文标题/品牌名 */
  --rc-font-en-read: "Andika","Lexend",var(--rc-font-zh);      /* 儿童教学正文/单词专用 */

  /* ---- 字号层级（文档与物料基准；课件投屏字号见 物料规范/H 章）---- */
  --rc-fs-display: 48px;  /* 海报/封面大标题 */
  --rc-fs-h1: 36px;       /* 主标题（允许 32–40，默认 36）*/
  --rc-fs-h2: 24px;       /* 副标题（允许 22–26，默认 24）*/
  --rc-fs-h3: 18px;       /* 小标题 */
  --rc-fs-body: 16px;     /* 正文（紧凑场景允许 14）*/
  --rc-fs-caption: 12px;  /* 辅助信息 */
  --rc-lh-heading: 1.25;  /* 标题行高（允许 1.2–1.3）*/
  --rc-lh-body: 1.7;      /* 正文行高（允许 1.6–1.8）*/
  --rc-ls-display: -0.02em; /* 大标题字距收紧 */
  --rc-ls-caps: 0.05em;     /* 全大写英文字距加宽 */

  /* ---- 间距（8px 栅格，只允许 8 的倍数）---- */
  --rc-space-1: 8px;  --rc-space-2: 16px; --rc-space-3: 24px;
  --rc-space-4: 32px; --rc-space-5: 40px; --rc-space-6: 48px; --rc-space-8: 64px;

  /* ---- 圆角 ---- */
  --rc-radius-s: 8px;    /* 小元素：标签/输入框 */
  --rc-radius-m: 16px;   /* 卡片 */
  --rc-radius-l: 24px;   /* 大容器/弹窗 */
  --rc-radius-full: 999px; /* 胶囊按钮 */

  /* ---- 阴影（一律用藏青投影，禁止纯黑生硬阴影）---- */
  --rc-shadow-s: 0 2px 8px rgba(23,40,77,.10);
  --rc-shadow-m: 0 4px 16px rgba(23,40,77,.12);
  --rc-shadow-l: 0 12px 32px rgba(23,40,77,.16);

  /* ---- 动效 ---- */
  --rc-dur-micro: 120ms;  /* 按压/点击反馈 */
  --rc-dur-s: 200ms;      /* hover、小元素状态切换 */
  --rc-dur-m: 300ms;      /* 翻页、面板、弹窗 */
  --rc-dur-l: 450ms;      /* 大场景切换 */
  --rc-ease: cubic-bezier(.2,0,0,1);     /* 标准缓动 */
  --rc-ease-out: cubic-bezier(0,0,.2,1); /* 入场 */
  --rc-ease-in: cubic-bezier(.4,0,1,1);  /* 出场（与入场镜像）*/
}

/* ---- 基础组件配方（详细规范见 05-组件库规范.md）---- */
.rc-btn-primary {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 12px 32px;
  background: var(--rc-cta); color: #FFFFFF;
  font-family: var(--rc-font-zh); font-size: var(--rc-fs-body); font-weight: 700;
  border: none; border-radius: var(--rc-radius-full);
  box-shadow: var(--rc-shadow-s);
  cursor: pointer;
  transition: background var(--rc-dur-s) var(--rc-ease), transform var(--rc-dur-micro) var(--rc-ease);
}
.rc-btn-primary:hover { background: var(--rc-cta-hover); }
.rc-btn-primary:active { transform: scale(0.97); }
.rc-btn-primary:disabled { background: var(--rc-red-200); cursor: not-allowed; }

.rc-btn-secondary {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 10px 30px;
  background: transparent; color: var(--rc-navy);
  font-family: var(--rc-font-zh); font-size: var(--rc-fs-body); font-weight: 700;
  border: 2px solid var(--rc-navy); border-radius: var(--rc-radius-full);
  cursor: pointer;
  transition: background var(--rc-dur-s) var(--rc-ease), transform var(--rc-dur-micro) var(--rc-ease);
}
.rc-btn-secondary:hover { background: var(--rc-navy-100); }
.rc-btn-secondary:active { transform: scale(0.97); }

.rc-card {
  background: var(--rc-bg-card);
  border: 1px solid var(--rc-border-card);
  border-radius: var(--rc-radius-m);
  box-shadow: var(--rc-shadow-m);
  padding: var(--rc-space-3);
}

.rc-tag {
  display: inline-flex; align-items: center;
  padding: 4px 12px;
  background: var(--rc-cream); color: var(--rc-navy);
  font-size: var(--rc-fs-caption); font-weight: 700;
  border-radius: var(--rc-radius-full);
}

/* ---- 无障碍：尊重系统减少动效设置 ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}