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

   tokens.css · Our Smart Baby

   Design Tokens · 所有CSS的依赖

   加载顺序：1/34

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



:root {

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

     一、颜色令牌

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

  /* 主色 · 暖橙 */

  --color-primary-50: hsl(25, 70%, 97%);

  --color-primary-100: hsl(25, 70%, 92%);

  --color-primary-200: hsl(25, 70%, 85%);

  --color-primary-300: hsl(25, 70%, 75%);

  --color-primary-400: hsl(25, 70%, 65%);

  --color-primary-500: hsl(25, 70%, 55%);

  --color-primary-600: hsl(25, 70%, 45%);

  --color-primary-700: hsl(25, 70%, 35%);

  --color-primary-800: hsl(25, 70%, 25%);

  --color-primary-900: hsl(25, 70%, 15%);



  /* 强调色 · 深橙 */

  --color-accent-50: hsl(15, 80%, 97%);

  --color-accent-100: hsl(15, 80%, 92%);

  --color-accent-200: hsl(15, 80%, 85%);

  --color-accent-300: hsl(15, 80%, 75%);

  --color-accent-400: hsl(15, 80%, 65%);

  --color-accent-500: hsl(15, 80%, 55%);

  --color-accent-600: hsl(15, 80%, 45%);

  --color-accent-700: hsl(15, 80%, 35%);

  --color-accent-800: hsl(15, 80%, 25%);

  --color-accent-900: hsl(15, 80%, 15%);



  /* 中性色 · 带暖调 */

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

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

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

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

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

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

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

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

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

  --color-neutral-900: hsl(30, 10%, 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%);



  /* 语义映射（默认值，themes.css会覆盖） */

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



  /* 流体排版 · 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;

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



  /* 容器查询断点 */

  --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-personality-1: '温暖';

  --brand-personality-2: '专业';

  --brand-personality-3: '优雅';



  --brand-signature-radius: 16px;

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



  /* 品牌语气令牌 */

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

}



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

   移动端空间节奏适配

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

@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 (prefers-reduced-motion: reduce) {

  :root {

    --duration-fast: 0.01ms;

    --duration-normal: 0.01ms;

    --duration-slow: 0.01ms;

    --duration-slower: 0.01ms;

  }

}