/* ============================================================
 * CE Logistics Design Tokens
 * 三层架构：Global → Alias → Component
 *
 * 命名规则：
 *   --[layer]-[category]-[property]-[variant]
 *
 * 示例：
 *   --color-brand-blue-500           Global 层（原始值）
 *   --color-primary                   Alias 层（语义化）
 *   --button-bg-primary               Component 层（组件专属）
 * ============================================================ */


/* ============================================================
 * 第一层：Global Tokens（原始值层）
 * 这一层只定义"颜色、尺寸"的原始值，不带语义
 * 修改这一层 = 修改整个品牌色卡
 * ============================================================ */
:root {

  /* --- 品牌蓝（Logo 主色）--- */
  --color-brand-blue-50:  #EBF2FB;
  --color-brand-blue-100: #C7DCF2;
  --color-brand-blue-200: #93BBE6;
  --color-brand-blue-300: #5E96D8;
  --color-brand-blue-400: #3B7BC4;  /* Logo 蓝原色 */
  --color-brand-blue-500: #2E63A3;
  --color-brand-blue-600: #1F4B82;
  --color-brand-blue-700: #133463;
  --color-brand-blue-800: #0A1F40;

  /* --- 品牌红（Logo 辅色）--- */
  --color-brand-red-50:  #FDECEC;
  --color-brand-red-100: #F8C7C9;
  --color-brand-red-200: #F09798;
  --color-brand-red-300: #E5686A;
  --color-brand-red-400: #D81F26;  /* Logo 红原色 */
  --color-brand-red-500: #B41A20;
  --color-brand-red-600: #8F1419;
  --color-brand-red-700: #6B0F13;
  --color-brand-red-800: #470A0D;

  /* --- 中性色（灰阶）--- */
  --color-neutral-0:   #FFFFFF;
  --color-neutral-50:  #FAFAFA;
  --color-neutral-100: #F5F5F5;
  --color-neutral-200: #E5E5E5;
  --color-neutral-300: #D4D4D4;
  --color-neutral-400: #A3A3A3;
  --color-neutral-500: #737373;
  --color-neutral-600: #525252;
  --color-neutral-700: #262626;
  --color-neutral-800: #1A1A1A;
  --color-neutral-900: #0A0A0A;

  /* --- 功能色（语义状态）--- */
  --color-functional-success-50:  #ECFDF5;
  --color-functional-success-400: #1D9E75;
  --color-functional-success-600: #0F6E56;

  --color-functional-warning-50:  #FFFBEB;
  --color-functional-warning-400: #EF9F27;
  --color-functional-warning-600: #BA7517;

  --color-functional-error-50:  #FEF2F2;
  --color-functional-error-400: #D81F26;
  --color-functional-error-600: #8F1419;

  --color-functional-info-50:  #EBF2FB;
  --color-functional-info-400: #3B7BC4;
  --color-functional-info-600: #1F4B82;

  /* --- 间距（基于 4px 网格）--- */
  --space-0:  0;
  --space-1:  4px;    /* xs */
  --space-2:  8px;    /* sm */
  --space-3:  12px;
  --space-4:  16px;   /* md */
  --space-5:  20px;
  --space-6:  24px;   /* lg */
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;   /* xl */
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;   /* 2xl */

  /* --- 字号（移动端基准）--- */
  --font-size-caption: 12px;
  --font-size-body-sm: 14px;
  --font-size-body:    16px;
  --font-size-body-lg: 18px;
  --font-size-h3:      22px;
  --font-size-h2:      28px;
  --font-size-h1:      36px;
  --font-size-display: 48px;

  /* --- 字重 --- */
  --font-weight-regular: 400;
  --font-weight-medium:  500;
  --font-weight-bold:    700;

  /* --- 行高 --- */
  --line-height-tight:   1.2;
  --line-height-snug:    1.3;
  --line-height-normal:  1.5;
  --line-height-relaxed: 1.6;
  --line-height-loose:   1.75;

  /* --- 字体族 --- */
  --font-family-sans:
    'Inter',
    'HarmonyOS Sans SC',
    'PingFang SC',
    'Noto Sans Khmer',
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    sans-serif;

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

  /* --- 圆角 --- */
  --radius-none: 0;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-full: 9999px;

  /* --- 阴影（克制使用，物流专业风格不需要太多阴影）--- */
  --shadow-none: none;
  --shadow-sm:   0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md:   0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-lg:   0 8px 24px rgba(0, 0, 0, 0.08);
  --shadow-xl:   0 16px 48px rgba(0, 0, 0, 0.10);

  /* --- 边框宽度 --- */
  --border-width-0: 0;
  --border-width-1: 1px;
  --border-width-2: 2px;
  --border-width-4: 4px;

  /* --- 动效时长 --- */
  --duration-instant: 100ms;
  --duration-fast:    150ms;
  --duration-normal:  250ms;
  --duration-slow:    400ms;
  --duration-slower:  600ms;

  /* --- 动效曲线 --- */
  --easing-linear:    linear;
  --easing-ease-in:   cubic-bezier(0.4, 0, 1, 1);
  --easing-ease-out:  cubic-bezier(0, 0, 0.2, 1);
  --easing-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --easing-spring:    cubic-bezier(0.5, 1.5, 0.5, 1);

  /* --- 断点（用于 JS 引用，CSS 中用 media query）--- */
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;

  /* --- Z-index 层级 --- */
  --z-base:     0;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-popover:  500;
  --z-toast:    600;
}


/* ============================================================
 * 第二层：Alias Tokens（语义化层）
 * 这一层定义"在什么场景下用什么值"
 * 修改这一层 = 调整品牌使用规则（如换主色、换深浅）
 * ============================================================ */
:root {

  /* --- 主品牌色（语义化引用）--- */
  --color-primary:        var(--color-brand-blue-600);   /* 主色：品牌蓝 */
  --color-primary-hover:  var(--color-brand-blue-700);
  --color-primary-active: var(--color-brand-blue-800);
  --color-primary-subtle: var(--color-brand-blue-50);    /* 浅背景 */

  --color-secondary:        var(--color-brand-red-400);   /* 强调色：品牌红 */
  --color-secondary-hover:  var(--color-brand-red-500);
  --color-secondary-active: var(--color-brand-red-600);
  --color-secondary-subtle: var(--color-brand-red-50);

  /* --- 文字颜色 --- */
  --color-text-primary:    var(--color-neutral-800);   /* 标题、正文主要文字 */
  --color-text-secondary:  var(--color-neutral-600);   /* 次要文字 */
  --color-text-tertiary:   var(--color-neutral-500);   /* 辅助文字、提示 */
  --color-text-disabled:   var(--color-neutral-400);   /* 禁用态文字 */
  --color-text-inverse:    var(--color-neutral-0);     /* 深色背景上的文字 */
  --color-text-link:       var(--color-primary);
  --color-text-link-hover: var(--color-primary-hover);

  /* --- 背景颜色 --- */
  --color-bg-page:        var(--color-neutral-50);   /* 页面整体背景 */
  --color-bg-surface:     var(--color-neutral-0);    /* 卡片、面板背景 */
  --color-bg-subtle:      var(--color-neutral-100);  /* 浅色区块底 */
  --color-bg-emphasis:    var(--color-neutral-800);  /* 深色强调区（CTA 区、Footer）*/
  --color-bg-overlay:     rgba(0, 0, 0, 0.5);        /* 遮罩层 */

  /* --- 边框颜色 --- */
  --color-border-subtle:  var(--color-neutral-200);  /* 默认细边框 */
  --color-border-default: var(--color-neutral-300);  /* 标准边框 */
  --color-border-strong:  var(--color-neutral-400);  /* 强调边框 */
  --color-border-focus:   var(--color-primary);      /* 输入框聚焦态 */

  /* --- 状态色（语义化）--- */
  --color-success:        var(--color-functional-success-400);
  --color-success-subtle: var(--color-functional-success-50);
  --color-success-strong: var(--color-functional-success-600);

  --color-warning:        var(--color-functional-warning-400);
  --color-warning-subtle: var(--color-functional-warning-50);
  --color-warning-strong: var(--color-functional-warning-600);

  --color-error:          var(--color-functional-error-400);
  --color-error-subtle:   var(--color-functional-error-50);
  --color-error-strong:   var(--color-functional-error-600);

  --color-info:           var(--color-functional-info-400);
  --color-info-subtle:    var(--color-functional-info-50);
  --color-info-strong:    var(--color-functional-info-600);

  /* --- 间距别名（业务语义）--- */
  --space-component-xs: var(--space-1);   /* 4px - 紧密元素之间 */
  --space-component-sm: var(--space-2);   /* 8px - 标签内边距 */
  --space-component-md: var(--space-4);   /* 16px - 卡片内边距 */
  --space-component-lg: var(--space-6);   /* 24px - 区块内边距 */

  --space-section-sm: var(--space-8);     /* 32px - 紧密区块间距 */
  --space-section-md: var(--space-12);    /* 48px - 标准区块间距 */
  --space-section-lg: var(--space-16);    /* 64px - 宽松区块间距 */
  --space-section-xl: var(--space-24);    /* 96px - 大区块间距 */

  /* --- 字体阶梯（业务语义）--- */
  --text-display: var(--font-size-display);  /* Hero 大标题 */
  --text-h1:      var(--font-size-h1);       /* 页面主标题 */
  --text-h2:      var(--font-size-h2);       /* 区块标题 */
  --text-h3:      var(--font-size-h3);       /* 小节标题 */
  --text-body-lg: var(--font-size-body-lg);  /* 重点正文 */
  --text-body:    var(--font-size-body);     /* 标准正文 */
  --text-body-sm: var(--font-size-body-sm);  /* 辅助说明 */
  --text-caption: var(--font-size-caption);  /* 极小说明 */

  /* --- 圆角别名 --- */
  --radius-button: var(--radius-md);   /* 按钮统一圆角 */
  --radius-input:  var(--radius-md);   /* 输入框 */
  --radius-card:   var(--radius-lg);   /* 卡片 */
  --radius-modal:  var(--radius-xl);   /* 模态框 */
  --radius-pill:   var(--radius-full); /* 胶囊标签 */
}


/* ============================================================
 * 第三层：Component Tokens（组件专属层）
 * 这一层定义"具体组件用什么值"
 * 修改这一层 = 调整某个组件的视觉细节
 * ============================================================ */
:root {

  /* --- 按钮组件 --- */
  --button-height-sm:   32px;
  --button-height-md:   40px;
  --button-height-lg:   48px;   /* 移动端默认 */
  --button-padding-x:   var(--space-5);
  --button-radius:      var(--radius-button);
  --button-font-weight: var(--font-weight-medium);

  /* 主按钮（红色 = 行动召唤，下载 App / 提交查询等）*/
  --button-primary-bg:           var(--color-secondary);
  --button-primary-bg-hover:     var(--color-secondary-hover);
  --button-primary-bg-active:    var(--color-secondary-active);
  --button-primary-text:         var(--color-text-inverse);

  /* 次按钮（蓝色描边 = 探索性操作，查看运费 / 了解更多 等）*/
  --button-secondary-bg:           transparent;
  --button-secondary-bg-hover:     var(--color-primary-subtle);
  --button-secondary-text:         var(--color-primary);
  --button-secondary-border:       var(--border-width-1) solid var(--color-primary);

  /* 文字按钮（无背景 = 弱操作）*/
  --button-text-bg:           transparent;
  --button-text-bg-hover:     var(--color-bg-subtle);
  --button-text-color:        var(--color-text-secondary);

  /* --- 输入框组件 --- */
  --input-height:           48px;   /* 移动端 */
  --input-padding-x:        var(--space-4);
  --input-bg:               var(--color-bg-surface);
  --input-border:           var(--border-width-1) solid var(--color-border-default);
  --input-border-hover:     var(--color-border-strong);
  --input-border-focus:     var(--color-border-focus);
  --input-radius:           var(--radius-input);
  --input-text:             var(--color-text-primary);
  --input-placeholder:      var(--color-text-tertiary);
  --input-focus-ring:       0 0 0 3px var(--color-primary-subtle);

  /* --- 卡片组件 --- */
  --card-bg:           var(--color-bg-surface);
  --card-border:       var(--border-width-1) solid var(--color-border-subtle);
  --card-radius:       var(--radius-card);
  --card-padding:      var(--space-6);
  --card-shadow:       var(--shadow-sm);
  --card-shadow-hover: var(--shadow-md);

  /* --- 导航组件 --- */
  --nav-height-mobile:  56px;
  --nav-height-desktop: 72px;
  --nav-bg:             var(--color-bg-surface);
  --nav-border-bottom:  var(--border-width-1) solid var(--color-border-subtle);
  --nav-link:           var(--color-text-secondary);
  --nav-link-hover:     var(--color-text-primary);
  --nav-link-active:    var(--color-primary);

  /* --- 标签 / 徽章 --- */
  --tag-padding-y:    var(--space-1);
  --tag-padding-x:    var(--space-2);
  --tag-radius:       var(--radius-pill);
  --tag-font-size:    var(--text-caption);
  --tag-font-weight:  var(--font-weight-medium);

  /* --- 时间轴组件（首页流程区块用）--- */
  --timeline-dot-size:        24px;
  --timeline-dot-bg:          var(--color-bg-surface);
  --timeline-dot-border:      var(--border-width-2) solid var(--color-primary);
  --timeline-dot-text:        var(--color-primary);
  --timeline-dot-bg-active:   var(--color-secondary);
  --timeline-dot-text-active: var(--color-text-inverse);
  --timeline-line-color:      var(--color-border-default);
  --timeline-line-width:      var(--border-width-2);
  --timeline-gap:             var(--space-5);
  --timeline-content-padding: var(--space-4);

  /* --- Toast / 提示条 --- */
  --toast-bg:        var(--color-bg-emphasis);
  --toast-text:      var(--color-text-inverse);
  --toast-radius:    var(--radius-md);
  --toast-padding:   var(--space-4);
  --toast-shadow:    var(--shadow-lg);
}


/* ============================================================
 * 暗色模式（Optional）
 * 启用方式：在 <html> 上加 [data-theme="dark"]
 * ============================================================ */
[data-theme="dark"] {
  /* 重新映射 Alias 层即可，Global 层保持不动 */
  --color-text-primary:    var(--color-neutral-50);
  --color-text-secondary:  var(--color-neutral-300);
  --color-text-tertiary:   var(--color-neutral-400);
  --color-text-disabled:   var(--color-neutral-600);
  --color-text-inverse:    var(--color-neutral-900);

  --color-bg-page:        var(--color-neutral-900);
  --color-bg-surface:     var(--color-neutral-800);
  --color-bg-subtle:      var(--color-neutral-700);
  --color-bg-emphasis:    var(--color-neutral-50);

  --color-border-subtle:  var(--color-neutral-700);
  --color-border-default: var(--color-neutral-600);
  --color-border-strong:  var(--color-neutral-500);

  --color-primary:        var(--color-brand-blue-300);
  --color-primary-hover:  var(--color-brand-blue-200);
  --color-primary-subtle: var(--color-brand-blue-800);
}


/* ============================================================
 * 多语言适配（柬文需要更大行高）
 * 启用方式：在 <html lang="km"> 上自动应用
 * ============================================================ */
:lang(km) {
  --line-height-tight:   1.4;
  --line-height-snug:    1.5;
  --line-height-normal:  1.7;
  --line-height-relaxed: 1.85;
}