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

   tokens.css · trackandreact.com

   Design Tokens — 所有CSS文件的依赖，必须最先加载

   生成者：Crystal Yifei Liu · 2026-09-25

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



:root {

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

     一、颜色令牌

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



  /* --- 主色：Cobalt Confidence（钴蓝） --- */

  --color-primary-50: hsl(220, 65%, 97%);

  --color-primary-100: hsl(220, 65%, 92%);

  --color-primary-200: hsl(220, 65%, 85%);

  --color-primary-300: hsl(220, 65%, 75%);

  --color-primary-400: hsl(220, 65%, 60%);

  --color-primary-500: hsl(220, 65%, 45%);

  --color-primary-600: hsl(220, 65%, 35%);

  --color-primary-700: hsl(220, 65%, 27%);

  --color-primary-800: hsl(220, 65%, 20%);

  --color-primary-900: hsl(220, 65%, 12%);



  /* --- 强调色：Digital Sage（数字鼠尾草绿） --- */

  --color-accent-50: hsl(145, 45%, 97%);

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

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

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

  --color-accent-400: hsl(145, 45%, 60%);

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

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

  --color-accent-700: hsl(145, 45%, 27%);

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

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



  /* --- 中性色 --- */

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

  --color-neutral-100: hsl(220, 15%, 95%);

  --color-neutral-200: hsl(220, 15%, 90%);

  --color-neutral-300: hsl(220, 15%, 80%);

  --color-neutral-400: hsl(220, 15%, 65%);

  --color-neutral-500: hsl(220, 15%, 50%);

  --color-neutral-600: hsl(220, 15%, 40%);

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

  --color-neutral-800: hsl(220, 15%, 20%);

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



  /* --- 语义色 --- */

  --color-success: hsl(145, 60%, 45%);

  --color-warning: hsl(40, 90%, 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);

  --color-cta-bg: var(--color-primary-500);

  --color-cta-hover: var(--color-primary-600);

  --color-cta-text: hsl(0, 0%, 100%);



  /* --- 透明度辅助 --- */

  --color-primary-alpha-10: hsla(220, 65%, 45%, 0.1);

  --color-primary-alpha-20: hsla(220, 65%, 45%, 0.2);

  --color-accent-alpha-10: hsla(145, 45%, 45%, 0.1);

  --color-accent-alpha-20: hsla(145, 45%, 45%, 0.2);



  /* --- 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', Roboto, sans-serif;

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

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

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



  /* --- 字号（流体排版 clamp格式） --- */

  --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.8;

  --leading-loose: 2.0;



  /* --- 字间距 --- */

  --tracking-tight: -0.02em;

  --tracking-normal: 0;

  --tracking-wide: 0.02em;

  --tracking-wider: 0.05em;



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

  --baseline: 4px;



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

     三、间距令牌

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



  --space-1: 0.25rem;   /* 4px */

  --space-2: 0.5rem;    /* 8px */

  --space-3: 0.75rem;   /* 12px */

  --space-4: 1rem;      /* 16px */

  --space-5: 1.25rem;   /* 20px */

  --space-6: 1.5rem;    /* 24px */

  --space-8: 2rem;      /* 32px */

  --space-10: 2.5rem;   /* 40px */

  --space-12: 3rem;     /* 48px */

  --space-16: 4rem;     /* 64px */

  --space-20: 5rem;     /* 80px */

  --space-24: 6rem;     /* 96px */



  /* --- 语义间距 --- */

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

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

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

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



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

     四、圆角令牌

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



  --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-inner: inset 0 2px 4px 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;



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

     八、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;



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

     九、空间节奏令牌

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



  --rhythm-tight: var(--space-2);      /* 8px - 元素内部 */

  --rhythm-normal: var(--space-5);     /* 20px - 段落之间 */

  --rhythm-loose: var(--space-8);      /* 32px - 章节之间 */

  --rhythm-breath: var(--space-16);    /* 64px - 大模块之间 */

  --rhythm-silence: var(--space-24);   /* 96px - 页面级分区 */



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

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

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

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

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



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

     十、容器查询断点

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



  --container-sm: 320px;

  --container-md: 480px;

  --container-lg: 640px;

  --container-xl: 800px;



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

     十一、加载动效令牌

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



  --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-personality-1: '务实';

  --brand-personality-2: '可信';

  --brand-personality-3: '直接';

  --brand-personality-4: '省钱';



  /* --- 品牌记忆点 --- */

  --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));

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



  /* --- 品牌语气令牌 --- */

  --voice-cta-primary: 'See My Picks';

  --voice-cta-secondary: 'Want to Go Deeper?';

  --voice-empty: 'Nothing here yet. Start exploring →';

  --voice-error: 'Something went wrong. Let\'s try again.';

  --voice-loading: 'Still loading. Thanks for waiting.';



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

     十三、可视化令牌

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



  --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 按 Mood 覆盖）

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



  --cover-bg-h: 220;

  --cover-bg-s: 65%;

  --cover-bg-l: 35%;



  --cover-accent-h: 145;

  --cover-accent-s: 45%;

  --cover-accent-l: 45%;



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

     十六、布局容器

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



  --container-max-width: 1200px;

  --container-narrow: 680px;

  --container-wide: 1400px;

}



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

   移动端空间节奏适配

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

@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;

    --text-5xl: 2.25rem;



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

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

  }

}



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

   减少动效偏好

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

@media (prefers-reduced-motion: reduce) {

  :root {

    --duration-fast: 0.01ms;

    --duration-normal: 0.01ms;

    --duration-slow: 0.01ms;

    --duration-slower: 0.01ms;

  }

}