/* ============================================================================
 * ADHD家长课堂 · 设计系统 tokens.css（L1 原始值 + L2 语义 token 默认值）
 * ----------------------------------------------------------------------------
 * 本文件是设计系统 L1+L2 层。主题（themes.css）只允许覆盖 L2 语义 token；
 * 组件层（components.css / utilities.css / JS 渲染层）禁止出现裸 hex，
 * 只允许引用 --c-* / --fs-* / --sp-* / --r-* / --sh-* 等语义 token。
 * 此处 :root 的 L2 默认值 = warmwood（暖木）主题，保证任何主题未加载时也有
 * 完整可用的外观。命名以 docs/DESIGN-SPEC.md §3 为唯一权威。
 * ========================================================================== */

:root {
  color-scheme: light;

  /* ===== L1 原始值（primitive，主题不得改写）=====  /* —— 中性阶梯（12 级）—— */
  --p-gray-0: #ffffff;   --p-gray-100: #f5f5f4; --p-gray-200: #e7e5e4;
  --p-gray-300: #d6d3d1; --p-gray-400: #a8a29e; --p-gray-500: #78716c;
  --p-gray-600: #57534e; --p-gray-700: #44403c; --p-gray-800: #292524;
  --p-gray-900: #1c1917; --p-gray-1000: #0e0d0c; --p-gray-1100: #000000;
  /* —— 主题色相阶梯（每阶 100/300/500/700/900）—— */
  --p-blue-100: #dbeafe; --p-blue-300: #93c5fd; --p-blue-500: #3b82f6; --p-blue-700: #1d4ed8; --p-blue-900: #1e3a8a;
  --p-amber-100: #fef3c7; --p-amber-300: #fcd34d; --p-amber-500: #f59e0b; --p-amber-700: #b45309; --p-amber-900: #78350f;
  --p-red-100: #fee2e2; --p-red-300: #fca5a5; --p-red-500: #ef4444; --p-red-700: #b91c1c; --p-red-900: #7f1d1d;
  --p-green-100: #dcfce7; --p-green-300: #86efac; --p-green-500: #22c55e; --p-green-700: #15803d; --p-green-900: #14532d;
  --p-indigo-100: #e0e7ff; --p-indigo-300: #a5b4fc; --p-indigo-500: #6366f1; --p-indigo-700: #4338ca; --p-indigo-900: #312e81;
  --p-sky-100: #e0f2fe; --p-sky-300: #7dd3fc; --p-sky-500: #0ea5e9; --p-sky-700: #0369a1; --p-sky-900: #0c4a6e;
  --p-purple-100: #f3e8ff; --p-purple-300: #d8b4fe; --p-purple-500: #a855f7; --p-purple-700: #7e22ce; --p-purple-900: #581c87;
  --p-teal-100: #ccfbf1; --p-teal-300: #5eead4; --p-teal-500: #14b8a6; --p-teal-700: #0f766e; --p-teal-900: #134e4a;
  --p-orange-100: #ffedd5; --p-orange-300: #fdba74; --p-orange-500: #f97316; --p-orange-700: #c2410c; --p-orange-900: #7c2d12;
  --p-stone-100: #f7f1e8; --p-stone-300: #e7daca; --p-stone-500: #b39b82; --p-stone-700: #5c4f42; --p-stone-900: #1a1614;
  /* —— 字重与排版比例基数 —— */
  --p-fw-400: 400; --p-fw-500: 500; --p-fw-600: 600; --p-fw-700: 700;
  --p-ratio-1-125: 1.125; --p-ratio-1-2: 1.2; --p-ratio-1-25: 1.25;
  --p-ratio-1-333: 1.333; --p-ratio-1-414: 1.414; --p-ratio-1-5: 1.5;
}

/* ===== L2 语义值（semantic）—— 默认值 = warmwood 主题 ===== */
:root {
  --c-canvas:           #faf7f2;
  --c-surface:          #ffffff;
  --c-surface-2:        #f5efe6;
  --c-surface-inset:    #fdfcfa;
  --c-surface-overlay:  #ffffff;
  --c-border:           #e7ded2;
  --c-border-strong:    #88827b;
  --c-divider:          #f0eae0;
  --c-text:             #292524;
  --c-text-muted:       #57534e;
  --c-text-faint:       #79716b;
  --c-text-inverse:     #ffffff;
  --c-accent:           #b45309;
  --c-accent-hover:     #974608;
  --c-accent-active:    #7a3806;
  --c-accent-soft:      #f6e8d6;
  --c-accent-border:    #ecd4c2;
  --c-accent-text:      #aa4f09;
  --c-on-accent:        #ffffff;
  --c-link:             #aa4f09;
  --c-link-hover:       #9c4908;
  --c-link-visited:     #873660;
  --c-focus:            #b45309;
  --c-focus-ring:       #928e8b;
  --c-selection-bg:     #f6e8d6;
  --c-selection-text:   #292524;
  --c-danger:           #dc2626;
  --c-danger-hover:     #cf2424;
  --c-danger-soft:      #fee2e2;
  --c-danger-border:    #fca5a5;
  --c-danger-text:      #991b1b;
  --c-warn:             #d97706;
  --c-warn-soft:        #fef3c7;
  --c-warn-border:      #fcd34d;
  --c-warn-text:        #854d0e;
  --c-ok:               #16a34a;
  --c-ok-soft:          #dcfce7;
  --c-ok-border:        #86efac;
  --c-ok-text:          #166534;
  --c-info:             #2563eb;
  --c-info-soft:        #dbeafe;
  --c-info-border:      #93c5fd;
  --c-info-text:        #1e40af;
  --c-emergency-bg:     #7f1d1d;
  --c-emergency-border: #991b1b;
  --c-emergency-text:   #ffffff;
  --c-emergency-action: #ffe4e4;
  --c-ev-e1:            #15803d;
  --c-ev-e1-bg:         #a9dcb4;
  --c-ev-e1-border:     #2f7d46;
  --c-ev-e1-text:       #14532d;
  --c-ev-e2:            #1d4ed8;
  --c-ev-e2-bg:         #e9f1fc;
  --c-ev-e2-border:     #3b82f6;
  --c-ev-e2-text:       #1e3a8a;
  --c-ev-p1:            #b45309;
  --c-ev-p1-bg:         #dfa94f;
  --c-ev-p1-border:     #8a5a12;
  --c-ev-p1-text:       #422c05;
  --r-xs:               4px;
  --r-sm:               6px;
  --r-md:               8px;
  --r-lg:               12px;
  --r-xl:               16px;
  --r-2xl:              24px;
  --r-full:             999px;
  --sh-1:               0 1px 2px rgba(41,29,15,0.05);
  --sh-2:               0 2px 6px rgba(41,29,15,0.06);
  --sh-3:               0 4px 14px rgba(41,29,15,0.08);
  --sh-4:               0 12px 32px rgba(41,29,15,0.10);
  --sh-focus:           0 0 0 2px #faf7f2, 0 0 0 4px #b45309, 0 1px 3px rgba(0,0,0,0.25);
  /* 焦点环厚度，镜像 --sh-focus 的**内环 spread**（第 2 段 2px）：
     outline 版焦点环用 outline-width=本值 + outline-offset=2px，
     使 outline 像素带正好落在 --sh-focus 内环色所在的「边框外缘 2px~4px」上，
     两种实现视觉逐像素重合。clarity 主题的 --sh-focus 内环为 5px → 覆盖为 3px。 */
  --focus-ring-w:       2px;
  --density-row:        1.4;
  --density-pad:        1.2;
  --icon-stroke:        1.7;
  --border-style:       solid;
  --font-display:       "Songti SC", "STSong", "Source Han Serif SC", "Noto Serif CJK SC", "SimSun", Georgia, serif;
  --font-body:          -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Source Han Sans SC", "Noto Sans CJK SC", sans-serif;
  --measure:            34em;
  --measure-wide:       46em;

  /* —— 字体族（§4.3，不加载 web font）—— */
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Cascadia Mono", "Courier New", monospace;
  --font-ui: var(--font-body);

  /* —— 字号阶梯（全部 clamp，移动端正文底限 16px）—— */
  --fs-2xs: clamp(12px, 11.4px + 0.3vw, 13px);
  --fs-xs: clamp(13px, 12.2px + 0.4vw, 14.5px);
  --fs-sm: clamp(14px, 13px + 0.5vw, 16px);
  --fs-base: clamp(16px, 14.5px + 0.75vw, 19px);
  --fs-lg: clamp(18px, 16px + 1vw, 23px);
  --fs-xl: clamp(21px, 18px + 1.5vw, 28px);
  --fs-2xl: clamp(25px, 19.5px + 2.75vw, 36px);
  --fs-3xl: clamp(29px, 20px + 4.5vw, 46px);
  --fs-4xl: clamp(34px, 21px + 6.5vw, 58px);

  /* —— 行高 / 字距 / 字重 —— */
  --lh-flat: 1.1; --lh-tight: 1.25; --lh-snug: 1.45; --lh-normal: 1.6;
  --lh-relaxed: 1.8; --lh-loose: 1.95;
  --ls-tight: -0.01em; --ls-normal: 0em; --ls-wide: 0.02em;
  --fw-normal: var(--p-fw-400); --fw-medium: var(--p-fw-500);
  --fw-semibold: var(--p-fw-600); --fw-bold: var(--p-fw-700);

  /* —— 空间 §3.5 —— */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px; --sp-5: 20px;
  --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px;
  --sp-16: 64px; --sp-20: 80px;
  --gutter: clamp(16px, 4vw, 40px);
  --stack-tight: 8px; --stack: 16px; --stack-loose: 24px;
  --section-gap: clamp(40px, 7vw, 96px);
  --container-max: 75rem;

  /* —— 描边宽度 §3.6 —— */
  --bw-hair: 0.5px; --bw-1: 1px; --bw-2: 2px; --bw-3: 4px;

  /* —— 动效 §3.7（禁止弹性/回弹）—— */
  --dur-1: 120ms; --dur-2: 200ms; --dur-3: 320ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-emphasis: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ===== L3 组件 token（仅薄封装，禁止裸 hex）===== */
:root {
  --header-bg: var(--c-canvas);
  --header-text: var(--c-text);
  --header-border: var(--c-border);
  --header-shadow: var(--sh-1);
  --nav-active-bg: var(--c-accent-soft);
  --nav-active-text: var(--c-accent-text);
  --card-bg: var(--c-surface);
  --card-border: var(--c-border);
  --code-bg: var(--c-surface-2);
}

/* ===== 基础层 ===== */
*,
*::before,
*::after { box-sizing: border-box; }

::selection {
  background: var(--c-selection-bg);
  color: var(--c-selection-text);
}

/* 全局焦点环：色环（主题色）+ 底色环（canvas）+ 微阴影，任何背景上可见 */
:focus-visible {
  outline: none;
  box-shadow: var(--sh-focus);
  border-radius: var(--r-xs);
}

/* 无障碍：用户偏好减少动效时全局降噪（token 层生效，组件无需单独处理） */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-1: 1ms; --dur-2: 1ms; --dur-3: 1ms;
  }
  *,
  *::before,
  *::after {
    animation-duration: 1ms;
    animation-iteration-count: 1;
    transition-duration: 1ms;
    scroll-behavior: auto;
  }
}

/* 渐进增强：支持 color-mix 的浏览器上让选中底色 / 分割线自适应主题，
   上方已有 hex 回退，旧 WebView 忽略本块不受影响 */
@supports (color: color-mix(in srgb, red, white)) {
  :root {
    --c-selection-bg: color-mix(in srgb, var(--c-accent) 16%, var(--c-canvas));
    --c-divider: color-mix(in srgb, var(--c-text) 8%, var(--c-canvas));
  }
}