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

   tokens.css · Design Tokens 层

   项目：CoolWalking (coolwalking.com)

   生成：Crystal Yifei Liu

   说明：所有其他 CSS 的依赖，必须最先加载

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



:root {

  /* ---------- 颜色令牌 · 主色（森林绿） ---------- */

  --color-primary-50: hsl(145, 45%, 96%);

  --color-primary-100: hsl(145, 45%, 92%);

  --color-primary-200: hsl(145, 45%, 85%);

  --color-primary-300: hsl(145, 45%, 75%);

  --color-primary-400: hsl(145, 45%, 62%);

  --color-primary-500: hsl(145, 45%, 42%);

  --color-primary-600: hsl(145, 45%, 35%);

  --color-primary-700: hsl(145, 45%, 28%);

  --color-primary-800: hsl(145, 45%, 20%);

  --color-primary-900: hsl(145, 45%, 12%);



  /* ---------- 颜色令牌 · 强调色（青色） ---------- */

  --color-accent-50: hsl(185, 55%, 96%);

  --color-accent-100: hsl(185, 55%, 92%);

  --color-accent-200: hsl(185, 55%, 85%);

  --color-accent-300: hsl(185, 55%, 72%);

  --color-accent-400: hsl(185, 55%, 55%);

  --color-accent-500: hsl(185, 55%, 38%);

  --color-accent-600: hsl(185, 55%, 32%);

  --color-accent-700: hsl(185, 55%, 25%);

  --color-accent-800: hsl(185, 55%, 18%);

  --color-accent-900: hsl(185, 55%, 11%);



  /* ---------- 颜色令牌 · 中性色 ---------- */

  --color-neutral-50: hsl(30, 15%, 98%);

  --color-neutral-100: hsl(30, 12%, 95%);

  --color-neutral-200: hsl(30, 10%, 90%);

  --color-neutral-300: hsl(30, 8%, 80%);

  --color-neutral-400: hsl(30, 6%, 65%);

  --color-neutral-500: hsl(30, 6%, 50%);

  --color-neutral-600: hsl(30, 8%, 40%);

  --color-neutral-700: hsl(30, 10%, 30%);

  --color-neutral-800: hsl(30, 12%, 20%);

  --color-neutral-900: hsl(30, 15%, 10%);



  /* ---------- 颜色令牌 · 语义色 ---------- */

  --color-success: hsl(145, 55%, 42%);

  --color-warning: hsl(40, 85%, 55%);

  --color-error: hsl(0, 70%, 55%);

  --color-info: hsl(210, 70%, 55%);



  /* ---------- 颜色令牌 · 语义映射 ---------- */

  --color-bg: var(--color-neutral-50);

  --color-surface: var(--color-neutral-100);

  --color-surface-hover: var(--color-neutral-200);

  --color-text-primary: var(--color-neutral-900);

  --color-text-secondary: var(--color-neutral-600);

  --color-text-tertiary: var(--color-neutral-400);

  --color-border: var(--color-neutral-200);

  --color-border-strong: var(--color-neutral-300);



  /* ---------- 颜色令牌 · L3专属 ---------- */

  --color-l3-bg: var(--color-neutral-100);

  --color-l3-border: var(--color-primary-300);

  --color-l3-accent: var(--color-primary-600);



  /* ---------- 字体令牌 ---------- */

  --font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --font-mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace;

  --font-serif: 'Georgia', 'Times New Roman', serif;



  /* ---------- 流体排版令牌 ---------- */

  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);

  --text-sm: clamp(0.875rem, 0.8rem + 0.375vw, 1rem);

  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);

  --text-lg: clamp(1.125rem, 1.05rem + 0.375vw, 1.25rem);

  --text-xl: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);

  --text-2xl: clamp(1.5rem, 1.35rem + 0.75vw, 1.875rem);

  --text-3xl: clamp(1.875rem, 1.6rem + 1.375vw, 2.5rem);

  --text-4xl: clamp(2.25rem, 1.85rem + 2vw, 3rem);

  --text-5xl: clamp(3rem, 2.25rem + 3.75vw, 4rem);



  /* ---------- 字重令牌 ---------- */

  --font-normal: 400;

  --font-medium: 500;

  --font-semibold: 600;

  --font-bold: 700;



  /* ---------- 行高令牌 ---------- */

  --leading-tight: 1.2;

  --leading-snug: 1.4;

  --leading-normal: 1.6;

  --leading-relaxed: 1.75;

  --leading-loose: 1.9;



  /* ---------- 字间距令牌 ---------- */

  --tracking-tight: -0.02em;

  --tracking-normal: 0;

  --tracking-wide: 0.02em;

  --tracking-wider: 0.05em;



  /* ---------- 间距令牌 ---------- */

  --space-1: 0.25rem;

  --space-2: 0.5rem;

  --space-3: 0.75rem;

  --space-4: 1rem;

  --space-5: 1.25rem;

  --space-6: 1.5rem;

  --space-8: 2rem;

  --space-10: 2.5rem;

  --space-12: 3rem;

  --space-16: 4rem;

  --space-20: 5rem;

  --space-24: 6rem;



  --section-padding: var(--space-16);

  --card-padding: var(--space-6);

  --gutter: var(--space-4);

  --paragraph-spacing: var(--space-5);



  /* ---------- 空间节奏令牌 ---------- */

  --rhythm-tight: var(--space-2);

  --rhythm-normal: var(--space-5);

  --rhythm-loose: var(--space-8);

  --rhythm-breath: var(--space-16);

  --rhythm-silence: var(--space-24);



  /* ---------- 视觉重量令牌 ---------- */

  --weight-light: var(--rhythm-tight);

  --weight-medium: var(--rhythm-normal);

  --weight-heavy: var(--rhythm-loose);

  --weight-anchor: var(--rhythm-breath);



  /* ---------- 圆角令牌 ---------- */

  --radius-sm: 4px;

  --radius-md: 8px;

  --radius-lg: 12px;

  --radius-xl: 16px;

  --radius-2xl: 24px;

  --radius-full: 9999px;



  /* ---------- 阴影令牌 ---------- */

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);

  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.05), 0 2px 4px rgba(0, 0, 0, 0.04);

  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.06), 0 4px 6px rgba(0, 0, 0, 0.04);

  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.08), 0 8px 10px rgba(0, 0, 0, 0.04);

  --shadow-focus: 0 0 0 3px var(--color-primary-200);



  /* ---------- 动效令牌 ---------- */

  --ease-in: cubic-bezier(0.4, 0, 1, 1);

  --ease-out: cubic-bezier(0, 0, 0.2, 1);

  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);



  --duration-fast: 100ms;

  --duration-normal: 200ms;

  --duration-slow: 300ms;

  --duration-slower: 500ms;



  /* ---------- 断点令牌 ---------- */

  --bp-sm: 640px;

  --bp-md: 768px;

  --bp-lg: 1024px;

  --bp-xl: 1280px;

  --bp-2xl: 1536px;



  /* ---------- 容器查询断点 ---------- */

  --container-sm: 320px;

  --container-md: 480px;

  --container-lg: 640px;

  --container-xl: 800px;



  /* ---------- z-index 令牌 ---------- */

  --z-base: 0;

  --z-dropdown: 100;

  --z-sticky: 200;

  --z-fixed: 300;

  --z-modal-backdrop: 400;

  --z-modal: 500;

  --z-popover: 600;

  --z-tooltip: 700;

  --z-toast: 800;



  /* ---------- 加载动效令牌 ---------- */

  --loading-pulse: 1.5s;

  --loading-shimmer: 2s;

  --loading-delay: 100ms;

  --loading-timeout: 3s;

  --loading-slow: 10s;



  --skeleton-bg: var(--color-neutral-100);

  --skeleton-shimmer: var(--color-neutral-200);

  --skeleton-highlight: var(--color-neutral-50);



  /* ---------- 品牌令牌 ---------- */

  --brand-signature-radius: 12px;

  --brand-signature-transition: cubic-bezier(0.34, 1.56, 0.64, 1);

  --brand-signature-gradient: linear-gradient(135deg, var(--color-primary-500), var(--color-accent-500));



  /* ---------- 可视化令牌 ---------- */

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

  --chart-accent: var(--color-accent-500);

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

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

  --chart-error: var(--color-error);

  --chart-neutral: var(--color-neutral-400);

  --chart-height-sm: 200px;

  --chart-height-md: 300px;

  --chart-height-lg: 400px;

  --chart-padding: var(--rhythm-normal);

  --chart-gap: var(--rhythm-tight);

  --chart-label-size: var(--text-sm);

  --chart-value-size: var(--text-base);

  --chart-title-size: var(--text-lg);



  /* ---------- 阅读辅助令牌 ---------- */

  --reading-max-width: 680px;

  --reading-line-height: var(--leading-relaxed);

  --reading-paragraph-gap: var(--rhythm-normal);

  --reading-font-size: var(--text-base);

  --reading-font-family: var(--font-body);

  --reading-speed: 200;



  /* ---------- 封面图HSL令牌（默认值，publish.php可覆盖） ---------- */

  --cover-bg-h: 145;

  --cover-bg-s: 45%;

  --cover-bg-l: 42%;

  --cover-accent-h: 185;

  --cover-accent-s: 55%;

  --cover-accent-l: 38%;



  /* ---------- 基线网格 ---------- */

  --baseline: 4px;

}



@media (max-width: 768px) {

  :root {

    --rhythm-tight: 6px;

    --rhythm-normal: 16px;

    --rhythm-loose: 24px;

    --rhythm-breath: 40px;

    --rhythm-silence: 56px;



    --text-base: 1rem;

    --text-lg: 1.125rem;

    --text-3xl: 1.75rem;

    --text-4xl: 2rem;

  }

}



@media (color-gamut: p3) {

  :root {

    --color-primary-500: color(display-p3 0.35 0.65 0.42);

    --color-accent-500: color(display-p3 0.30 0.55 0.58);

  }

}