/* ============================================================
   卜卜点点 · 交互式设计规范 v1.0
   tokens.css — 设计令牌（唯一真源）
   ------------------------------------------------------------
   用法：在任意网站 / 小程序 H5 / 设备端页面中
        <link rel="stylesheet" href="css/tokens.css">
   随后即可使用 var(--bbd-*) 全部令牌。
   ============================================================ */

/* ---------- 1. 品牌基础色阶 (Primitive) ---------- */

:root {
  /* 点点红 · 品牌主色（源自角色裙装与刊物红） */
  --bbd-red-50:  #FEF2F0;
  --bbd-red-100: #FDE1DC;
  --bbd-red-200: #FBC4BB;
  --bbd-red-300: #F7A197;
  --bbd-red-400: #F37E6E;
  --bbd-red-500: #EF5B4B;   /* ★ 品牌主色 */
  --bbd-red-600: #D8402F;
  --bbd-red-700: #B32E20;
  --bbd-red-800: #8A2117;
  --bbd-red-900: #5C150E;

  /* 卜卜蓝 · 藏青（源自角色短裤 / 正装） */
  --bbd-navy-50:  #F0F2F6;
  --bbd-navy-100: #DFE4ED;
  --bbd-navy-200: #C0C9DA;
  --bbd-navy-300: #9AA8C1;
  --bbd-navy-400: #6C7E9E;
  --bbd-navy-500: #3A4A66;  /* ★ 品牌副色 */
  --bbd-navy-600: #2C3A53;
  --bbd-navy-700: #202B40;
  --bbd-navy-800: #161E2E;
  --bbd-navy-900: #0D121C;

  /* 鸭嘴黄 · 咕噜鸭（奖励 / 提醒 / 高亮） */
  --bbd-yellow-50:  #FEFAE9;
  --bbd-yellow-100: #FDF3C9;
  --bbd-yellow-200: #FAE79B;
  --bbd-yellow-300: #F5D96F; /* ★ */
  --bbd-yellow-400: #E8C348;
  --bbd-yellow-500: #D0A62A;
  --bbd-yellow-600: #A67F18;

  /* 藕粉 · 刊物标题底 / 腮红延伸 */
  --bbd-pink-50:  #FDF4F4;
  --bbd-pink-100: #FAE4E4;
  --bbd-pink-200: #F2C8C8;
  --bbd-pink-300: #E8A0A0;  /* ★ */
  --bbd-pink-400: #DC7E7E;
  --bbd-pink-500: #C85E5E;

  /* 咕噜蓝 · 信息 / 链接 */
  --bbd-blue-300: #7A9DD0;
  --bbd-blue-500: #33609C;  /* ★ */
  --bbd-blue-700: #1F3F6B;

  /* 中性暖灰阶 · 纸感 */
  --bbd-ink-0:   #FFFFFF;
  --bbd-ink-25:  #FCFBF8;   /* 纸白 · 页面底 */
  --bbd-ink-50:  #F7F5F0;
  --bbd-ink-100: #EFEBE3;
  --bbd-ink-200: #E2DDD3;   /* 分割线 */
  --bbd-ink-300: #C9C3B7;   /* 禁用 / 占位 */
  --bbd-ink-400: #A8A197;
  --bbd-ink-500: #8A8379;   /* 三级文字 */
  --bbd-ink-600: #6E685F;   /* 二级文字 */
  --bbd-ink-700: #4A453E;
  --bbd-ink-800: #2E2B27;
  --bbd-ink-900: #1A1A1A;   /* ★ 墨黑 · 描边 / 正文 */

  /* 肤色 / 腮红（角色专用） */
  --bbd-skin:       #FFE1D2;
  --bbd-skin-shade: #F7C3B0;
  --bbd-blush:      #F5A79C;

  /* 功能色 · 儿童健康场景 */
  --bbd-good:      #4F9E63;  --bbd-good-bg: #E9F4EC;
  --bbd-warn:      #D89731;  --bbd-warn-bg: #FDF2E0;
  --bbd-rest:      #5B7FB5;  --bbd-rest-bg: #EAF0F9;
  --bbd-alert:     #C9452F;  --bbd-alert-bg:#FBE9E5;
  --bbd-lock:      #8C86A8;  --bbd-lock-bg: #F1EFF7;
}

/* ---------- 2. 语义令牌 (Semantic) — 界面开发只使用这一层 ---------- */

:root {
  /* 背景 */
  --bbd-bg:            var(--bbd-ink-25);
  --bbd-bg-sunken:     var(--bbd-ink-50);
  --bbd-surface:       var(--bbd-ink-0);
  --bbd-surface-alt:   var(--bbd-ink-50);
  --bbd-surface-brand: var(--bbd-red-50);
  --bbd-overlay:       rgba(26, 26, 26, .42);

  /* 文字 */
  --bbd-text:          var(--bbd-ink-900);
  --bbd-text-secondary:var(--bbd-ink-600);
  --bbd-text-tertiary: var(--bbd-ink-500);
  --bbd-text-disabled: var(--bbd-ink-300);
  --bbd-text-invert:   #FFFFFF;
  --bbd-text-brand:    var(--bbd-red-700);   /* 6.31:1  AA */
  --bbd-text-link:     var(--bbd-blue-700);

  /* 线条 */
  --bbd-line:          var(--bbd-ink-200);
  --bbd-line-strong:   var(--bbd-ink-900);
  --bbd-line-brand:    var(--bbd-red-500);

  /* 行动 */
  --bbd-action-primary:        var(--bbd-red-500);
  --bbd-action-primary-hover:  var(--bbd-red-600);
  --bbd-action-primary-active: var(--bbd-red-700);
  --bbd-action-secondary:      var(--bbd-navy-500);
  --bbd-action-ghost-border:   var(--bbd-ink-900);
  --bbd-action-focus:          var(--bbd-blue-500);

  /* 状态 */
  --bbd-state-good:  var(--bbd-good);
  --bbd-state-warn:  var(--bbd-warn);
  --bbd-state-rest:  var(--bbd-rest);
  --bbd-state-alert: var(--bbd-alert);
  --bbd-state-lock:  var(--bbd-lock);

  /* 材质（贴纸语言） */
  --bbd-blush-soft: var(--bbd-blush);
  --bbd-dot:        var(--bbd-ink-900);   /* 妈妈裙圆点 */
}

/* ---------- 3. 字体与字阶 ---------- */

:root {
  /* 展示字体：站酷快乐体（自带子集，见 assets/fonts/） */
  --bbd-font-display: "BBD KuaiLe", "ZCOOL KuaiLe", "PingFang SC", "Hiragino Sans GB",
                      "Microsoft YaHei", sans-serif;
  /* 正文字体：黑体系（阅读效率优先） */
  --bbd-font-text:    "BBD Text", "PingFang SC", "Hiragino Sans GB", "Source Han Sans SC",
                      "Noto Sans SC", "Microsoft YaHei UI", "Microsoft YaHei", system-ui,
                      -apple-system, "Segoe UI", sans-serif;
  /* 数字：等宽，用于健康数据 */
  --bbd-font-num:     "DIN Alternate", "Bahnschrift", "Roboto Mono", ui-monospace,
                      "SF Mono", Consolas, monospace;

  --bbd-fw-regular: 400;
  --bbd-fw-medium:  500;
  --bbd-fw-bold:    700;

  /* 字阶（桌面 / 移动共用，移动端取 clamp 下限） */
  --bbd-fs-display: clamp(40px, 6vw, 64px); /* 品牌展示 */
  --bbd-fs-h1:      clamp(30px, 4vw, 44px);
  --bbd-fs-h2:      clamp(24px, 3vw, 32px);
  --bbd-fs-h3:      24px;
  --bbd-fs-h4:      20px;
  --bbd-fs-body-lg: 18px;   /* 儿童正文下限 */
  --bbd-fs-body:    16px;
  --bbd-fs-body-sm: 14px;   /* 仅限家长端 */
  --bbd-fs-caption: 13px;
  --bbd-fs-micro:   12px;

  --bbd-lh-tight: 1.15;
  --bbd-lh-snug:  1.35;
  --bbd-lh-base:  1.7;    /* 中文正文 */
  --bbd-lh-loose: 1.9;

  --bbd-ls-tight: -.02em;
  --bbd-ls-base:   0;
  --bbd-ls-wide:   .06em;
  --bbd-ls-brand:  .12em;   /* 品牌字分隔 */

  --bbd-measure: 36em;      /* 正文最佳行宽 */
}

/* ---------- 4. 空间 / 圆角 / 描边 ---------- */

:root {
  --bbd-space-1:  4px;
  --bbd-space-2:  8px;
  --bbd-space-3:  12px;
  --bbd-space-4:  16px;
  --bbd-space-5:  24px;
  --bbd-space-6:  32px;
  --bbd-space-7:  48px;
  --bbd-space-8:  64px;
  --bbd-space-9:  96px;
  --bbd-space-10: 128px;

  /* 圆角：大而软 —— 儿童视觉的"无尖角"原则 */
  --bbd-radius-xs:  6px;
  --bbd-radius-sm:  10px;
  --bbd-radius-md:  16px;
  --bbd-radius-lg:  24px;
  --bbd-radius-xl:  32px;
  --bbd-radius-2xl: 44px;
  --bbd-radius-pill: 999px;
  --bbd-radius-circle: 50%;

  /* 描边：手绘线宽的 UI 化 */
  --bbd-stroke-hair: 1px;
  --bbd-stroke-sm:   1.5px;
  --bbd-stroke-md:   2px;
  --bbd-stroke-lg:   3px;
  --bbd-stroke-xl:   4px;   /* 角色 / 插画专用 */
}

/* ---------- 5. 阴影（软影 + 贴纸硬影） ---------- */

:root {
  --bbd-shadow-xs: 0 1px 2px rgba(26,26,26,.05);
  --bbd-shadow-sm: 0 2px 8px rgba(26,26,26,.06);
  --bbd-shadow-md: 0 6px 20px rgba(26,26,26,.08);
  --bbd-shadow-lg: 0 16px 40px rgba(26,26,26,.10);
  --bbd-shadow-brand: 0 8px 24px rgba(239,91,75,.24);

  /* 贴纸影：品牌专属，模拟手绘贴纸的"起翘"感 */
  --bbd-shadow-sticker:        3px 3px 0 0 var(--bbd-ink-900);
  --bbd-shadow-sticker-sm:     2px 2px 0 0 var(--bbd-ink-900);
  --bbd-shadow-sticker-pink:   3px 3px 0 0 var(--bbd-red-500);
  --bbd-shadow-sticker-navy:   3px 3px 0 0 var(--bbd-navy-500);
}

/* ---------- 6. 动效 ---------- */

:root {
  --bbd-dur-instant: 90ms;
  --bbd-dur-fast:   160ms;
  --bbd-dur-base:   240ms;
  --bbd-dur-slow:   360ms;
  --bbd-dur-lazy:   560ms;

  --bbd-ease-standard: cubic-bezier(.32, .72, .32, 1);
  --bbd-ease-in:       cubic-bezier(.5, 0, .84, .34);
  --bbd-ease-out:      cubic-bezier(.16, .84, .44, 1);
  --bbd-ease-bounce:   cubic-bezier(.34, 1.56, .64, 1);   /* 角色弹跳 */
  --bbd-ease-soft:     cubic-bezier(.4, 0, .2, 1);

  --bbd-transition-base: all var(--bbd-dur-base) var(--bbd-ease-standard);
}

/* ---------- 7. 版式 / 栅格 ---------- */

:root {
  --bbd-container:    1200px;
  --bbd-container-narrow: 760px;
  --bbd-gutter:       24px;
  --bbd-gutter-sm:    16px;
  --bbd-header-h:     64px;

  /* 触控目标 */
  --bbd-tap-min:  44px;   /* 绝对下限 */
  --bbd-tap-base: 48px;   /* 默认 */
  --bbd-tap-kid:  56px;   /* 儿童主操作 */

  --bbd-z-base: 0;
  --bbd-z-sticky: 100;
  --bbd-z-drawer: 300;
  --bbd-z-modal: 400;
  --bbd-z-toast: 600;
}

/* ---------- 8. 主题：护眼模式（儿童长时间使用） ---------- */

[data-theme="eyecare"] {
  --bbd-bg:            #F4EFE4;
  --bbd-bg-sunken:     #EDE7DA;
  --bbd-surface:       #FBF7EE;
  --bbd-surface-alt:   #F1EBDF;
  --bbd-surface-brand: #F9E6E0;

  --bbd-text:          #2A2620;
  --bbd-text-secondary:#5D564B;
  --bbd-text-tertiary: #7A7266;

  --bbd-line:          #DCD4C4;

  --bbd-action-primary:        #DE5240;
  --bbd-action-primary-hover:  #C74331;

  --bbd-red-500: #DE5240;
  --bbd-red-50:  #F6E3DD;
  --bbd-yellow-300: #EDD08A;
  --bbd-good: #4C8F5E;
  --bbd-warn: #C58F35;
  --bbd-rest: #55769F;
}

/* ---------- 9. 主题：夜间模式 ---------- */

[data-theme="night"] {
  --bbd-bg:            #14161C;
  --bbd-bg-sunken:     #0E1014;
  --bbd-surface:       #1C1F27;
  --bbd-surface-alt:   #232733;
  --bbd-surface-brand: #2A1D1B;
  --bbd-overlay:       rgba(0,0,0,.62);

  --bbd-text:          #F2EFE9;
  --bbd-text-secondary:#B9B4AA;
  --bbd-text-tertiary: #8E897F;
  --bbd-text-disabled: #5A564F;
  --bbd-text-brand:    #FF9C8F;
  --bbd-text-link:     #8FB4E8;

  --bbd-line:          #2E333F;
  --bbd-line-strong:   #F2EFE9;

  --bbd-action-primary:        #F0705F;
  --bbd-action-primary-hover:  #F58A7B;
  --bbd-action-primary-active: #D8402F;

  --bbd-ink-900: #F2EFE9;   /* 描边反相 */
  --bbd-shadow-sticker:      3px 3px 0 0 #F2EFE9;
  --bbd-shadow-sticker-sm:   2px 2px 0 0 #F2EFE9;

  --bbd-good: #6FBE83;  --bbd-good-bg: #1C2A20;
  --bbd-warn: #E8B75C;  --bbd-warn-bg: #2C2418;
  --bbd-rest: #8AABDA;  --bbd-rest-bg: #1A2230;
  --bbd-alert:#F0836E;  --bbd-alert-bg:#2C1D1A;
  --bbd-lock: #AFA8C6;  --bbd-lock-bg: #232134;
}

/* ---------- 10. 无障碍：减弱动效 ---------- */

@media (prefers-reduced-motion: reduce) {
  :root {
    --bbd-dur-instant: 1ms;
    --bbd-dur-fast: 1ms;
    --bbd-dur-base: 1ms;
    --bbd-dur-slow: 1ms;
    --bbd-dur-lazy: 1ms;
  }
}

/* ---------- 11. 字面色阶（供色彩页自动渲染） ---------- */

:root {
  --bbd-ramp-red:    var(--bbd-red-50),var(--bbd-red-100),var(--bbd-red-200),var(--bbd-red-300),var(--bbd-red-400),var(--bbd-red-500),var(--bbd-red-600),var(--bbd-red-700),var(--bbd-red-800),var(--bbd-red-900);
  --bbd-ramp-navy:   var(--bbd-navy-50),var(--bbd-navy-100),var(--bbd-navy-200),var(--bbd-navy-300),var(--bbd-navy-400),var(--bbd-navy-500),var(--bbd-navy-600),var(--bbd-navy-700),var(--bbd-navy-800),var(--bbd-navy-900);
  --bbd-ramp-yellow: var(--bbd-yellow-50),var(--bbd-yellow-100),var(--bbd-yellow-200),var(--bbd-yellow-300),var(--bbd-yellow-400),var(--bbd-yellow-500),var(--bbd-yellow-600);
  --bbd-ramp-pink:   var(--bbd-pink-50),var(--bbd-pink-100),var(--bbd-pink-200),var(--bbd-pink-300),var(--bbd-pink-400),var(--bbd-pink-500);
  --bbd-ramp-ink:    var(--bbd-ink-0),var(--bbd-ink-25),var(--bbd-ink-50),var(--bbd-ink-100),var(--bbd-ink-200),var(--bbd-ink-300),var(--bbd-ink-400),var(--bbd-ink-500),var(--bbd-ink-600),var(--bbd-ink-700),var(--bbd-ink-800),var(--bbd-ink-900);
}