/* ═══════════════════════════════════════════════════════════
   满意解研究所 · SRI Design Token System v2.0
   
   三层架构 (行业最佳实践):
   
   Layer 1: Primitive Tokens (原始值 — 不可直接使用)
     > 品牌调色盘的基础值，如 red-500, gold-600 等
   
   Layer 2: Semantic Tokens (语义化 — 页面开发使用)  
     > 按用途命名的变量，如 --color-primary, --bg-surface
     
   Layer 3: Component Tokens (组件级 — 组件开发使用)
     > 按组件命名的变量，如 --btn-primary-bg, --card-radius
   
   命名规范: [prefix]-[category]-[property]-[variant]-[state]
   示例: sri-color-surface-primary-hover
   
   版本: v2.0 · 2026-06-27 · 基于 Material Design 3 + Design Tokens 实践
   ═══════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════
   LAYER 1: Primitive Tokens (原始值)
   不可在组件/页面中直接引用这些变量
   ═══════════════════════════════════════════════ */

:root {
  /* ── 品牌色原始值 ── */
  --sri-prim-red-900:    #7A1510;
  --sri-prim-red-800:    #8B1A13;
  --sri-prim-red-700:    #A31D15;
  --sri-prim-red-600:    #8B4513;   /* 品牌主色基准 */
  --sri-prim-red-500:    #D4452C;
  --sri-prim-red-400:    #E0604A;
  --sri-prim-red-300:    #EB8A7A;
  --sri-prim-red-200:    #F5C0B5;
  --sri-prim-red-100:    #FBE5E0;
  --sri-prim-red-50:     #FDF2F0;

  --sri-prim-gold-900:   #6B4E0A;
  --sri-prim-gold-800:   #8B6410;
  --sri-prim-gold-700:   #A67C15;
  --sri-prim-gold-600:   #D4A574;   /* 辅色基准 */
  --sri-prim-gold-500:   #C99A1A;
  --sri-prim-gold-400:   #D4AD3A;
  --sri-prim-gold-300:   #E0C460;
  --sri-prim-gold-200:   #EDDA90;
  --sri-prim-gold-100:   #F7EEC0;
  --sri-prim-gold-50:    #FBF6E5;

  /* ── 中性色原始值 ── */
  --sri-prim-neutral-900: #1A1A1A;
  --sri-prim-neutral-800: #2A2A2A;
  --sri-prim-neutral-700: #4A4A4A;
  --sri-prim-neutral-600: #666666;
  --sri-prim-neutral-500: #888888;
  --sri-prim-neutral-400: #AAAAAA;
  --sri-prim-neutral-300: #CCCCCC;
  --sri-prim-neutral-200: #E0E0E0;
  --sri-prim-neutral-100: #F0F0F0;
  --sri-prim-neutral-50:  #F8F8F8;

  /* ── 暖色原始值 (背景用) ── */
  --sri-prim-warm-900:   #5C5040;
  --sri-prim-warm-800:   #7A6B55;
  --sri-prim-warm-700:   #99886B;
  --sri-prim-warm-600:   #B8A58A;
  --sri-prim-warm-500:   #CDC0A8;
  --sri-prim-warm-400:   #DDD5C2;
  --sri-prim-warm-300:   #E8E2D5;
  --sri-prim-warm-200:   #F0ECE3;
  --sri-prim-warm-100:   #F5F2EB;
  --sri-prim-warm-50:    #FBF9F5;

  /* ── 功能色原始值 ── */
  --sri-prim-green-600:  #2E7D32;
  --sri-prim-green-100:  #E8F5E9;
  --sri-prim-blue-600:   #1565C0;
  --sri-prim-blue-100:   #E3F2FD;
  --sri-prim-orange-600: #E65100;
  --sri-prim-orange-100: #FFF3E0;
  --sri-prim-purple-600: #7B1FA2;
  --sri-prim-purple-100: #F3E5F5;

  /* ── 间距原始值 ── */
  --sri-prim-space-2xs:  2px;
  --sri-prim-space-xs:   4px;
  --sri-prim-space-sm:   8px;
  --sri-prim-space-md:   16px;
  --sri-prim-space-lg:   24px;
  --sri-prim-space-xl:   32px;
  --sri-prim-space-2xl:  48px;
  --sri-prim-space-3xl:  64px;
  --sri-prim-space-4xl:  96px;

  /* ── 排版原始值 ── */
  --sri-prim-font-sans:  "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  --sri-prim-font-mono:  "SF Mono", "Menlo", "Consolas", "Courier New", monospace;
  --sri-prim-font-serif: "Noto Serif SC", "STSong", "SimSun", Georgia, serif;
  --sri-prim-font-size-xs:   11px;
  --sri-prim-font-size-sm:   13px;
  --sri-prim-font-size-base: 15px;
  --sri-prim-font-size-md:   17px;
  --sri-prim-font-size-lg:   20px;
  --sri-prim-font-size-xl:   24px;
  --sri-prim-font-size-2xl:  32px;
  --sri-prim-font-size-3xl:  40px;
  --sri-prim-font-size-4xl:  56px;
  --sri-prim-line-height-tight:  1.2;
  --sri-prim-line-height-base:   1.6;
  --sri-prim-line-height-loose:  1.8;
  --sri-prim-font-weight-normal: 400;
  --sri-prim-font-weight-medium: 500;
  --sri-prim-font-weight-bold:   700;

  /* ── 半径原始值 ── */
  --sri-prim-radius-sm:   4px;
  --sri-prim-radius-md:   8px;
  --sri-prim-radius-lg:   12px;
  --sri-prim-radius-xl:   16px;
  --sri-prim-radius-full: 9999px;

  /* ── 阴影原始值 ── */
  --sri-prim-shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
  --sri-prim-shadow-sm: 0 2px 8px rgba(0,0,0,0.06);
  --sri-prim-shadow-md: 0 4px 16px rgba(0,0,0,0.08);
  --sri-prim-shadow-lg: 0 8px 32px rgba(0,0,0,0.12);
  --sri-prim-shadow-xl: 0 16px 48px rgba(0,0,0,0.16);

  /* ── 断点原始值 ── */
  --sri-prim-bp-mobile:  640px;
  --sri-prim-bp-tablet:  768px;
  --sri-prim-bp-desktop: 1024px;
  --sri-prim-bp-wide:    1280px;

  /* ── 动效原始值 ── */
  --sri-prim-duration-fast:   0.15s;
  --sri-prim-duration-base:   0.25s;
  --sri-prim-duration-slow:   0.4s;
  --sri-prim-easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --sri-prim-easing-decel:    cubic-bezier(0, 0, 0.2, 1);
  --sri-prim-easing-accel:    cubic-bezier(0.4, 0, 1, 1);
}


/* ═══════════════════════════════════════════════
   LAYER 2: Semantic Tokens (语义化)
   页面开发和组件使用这些变量
   ═══════════════════════════════════════════════ */

:root {
  /* ── 颜色语义 ── */
  --sri-color-primary:        var(--sri-prim-red-600);
  --sri-color-primary-hover:  var(--sri-prim-red-700);
  --sri-color-primary-active: var(--sri-prim-red-800);
  --sri-color-primary-light:  var(--sri-prim-red-100);

  --sri-color-secondary:        var(--sri-prim-gold-600);
  --sri-color-secondary-hover:  var(--sri-prim-gold-700);
  --sri-color-secondary-light:  var(--sri-prim-gold-100);

  --sri-color-surface:          var(--sri-prim-warm-100);
  --sri-color-surface-alt:      var(--sri-prim-warm-200);
  --sri-color-surface-card:     #FFFFFF;
  --sri-color-surface-overlay:  rgba(0, 0, 0, 0.5);
  --sri-color-surface-input:    var(--sri-prim-warm-50);

  --sri-color-text-primary:     var(--sri-prim-neutral-800);
  --sri-color-text-secondary:   var(--sri-prim-neutral-600);
  --sri-color-text-muted:       var(--sri-prim-neutral-500);
  --sri-color-text-inverse:     #FFFFFF;
  --sri-color-text-link:        var(--sri-prim-blue-600);

  --sri-color-border:           var(--sri-prim-warm-400);
  --sri-color-border-light:     var(--sri-prim-warm-300);
  --sri-color-border-focus:     var(--sri-prim-red-600);

  --sri-color-success:          var(--sri-prim-green-600);
  --sri-color-success-bg:       var(--sri-prim-green-100);
  --sri-color-info:             var(--sri-prim-blue-600);
  --sri-color-info-bg:          var(--sri-prim-blue-100);
  --sri-color-warning:          var(--sri-prim-orange-600);
  --sri-color-warning-bg:       var(--sri-prim-orange-100);
  --sri-color-error:            var(--sri-prim-red-600);
  --sri-color-error-bg:         var(--sri-prim-red-100);
  --sri-color-purple:           var(--sri-prim-purple-600);
  --sri-color-purple-bg:        var(--sri-prim-purple-100);

  /* ── 排版语义 ── */
  --sri-font-family:         var(--sri-prim-font-sans);
  --sri-font-family-mono:    var(--sri-prim-font-mono);
  --sri-font-family-serif:   var(--sri-prim-font-serif);
  --sri-font-size-body:      var(--sri-prim-font-size-base);
  --sri-font-size-small:     var(--sri-prim-font-size-sm);
  --sri-font-size-caption:   var(--sri-prim-font-size-xs);
  --sri-font-size-h1:        var(--sri-prim-font-size-4xl);
  --sri-font-size-h2:        var(--sri-prim-font-size-3xl);
  --sri-font-size-h3:        var(--sri-prim-font-size-2xl);
  --sri-font-size-h4:        var(--sri-prim-font-size-xl);
  --sri-font-size-h5:        var(--sri-prim-font-size-lg);
  --sri-font-size-h6:        var(--sri-prim-font-size-md);
  --sri-font-weight-normal:  var(--sri-prim-font-weight-normal);
  --sri-font-weight-medium:  var(--sri-prim-font-weight-medium);
  --sri-font-weight-bold:    var(--sri-prim-font-weight-bold);
  --sri-line-height:         var(--sri-prim-line-height-base);
  --sri-line-height-tight:   var(--sri-prim-line-height-tight);

  /* ── 间距语义 ── */
  --sri-space-gap:           var(--sri-prim-space-sm);
  --sri-space-padding:       var(--sri-prim-space-md);
  --sri-space-margin:        var(--sri-prim-space-lg);
  --sri-space-section:       var(--sri-prim-space-2xl);
  --sri-space-page:          var(--sri-prim-space-3xl);

  /* ── 半径语义 ── */
  --sri-radius-sm:           var(--sri-prim-radius-sm);
  --sri-radius:              var(--sri-prim-radius-md);
  --sri-radius-lg:           var(--sri-prim-radius-lg);
  --sri-radius-xl:           var(--sri-prim-radius-xl);

  /* ── 阴影语义 ── */
  --sri-shadow-card:         var(--sri-prim-shadow-sm);
  --sri-shadow-dropdown:     var(--sri-prim-shadow-md);
  --sri-shadow-modal:        var(--sri-prim-shadow-lg);

  /* ── 布局语义 ── */
  --sri-max-width:           1000px;
  --sri-max-width-wide:      1200px;
  --sri-max-width-narrow:    720px;

  /* ── 动效语义 ── */
  --sri-transition-fast:     var(--sri-prim-duration-fast) var(--sri-prim-easing-standard);
  --sri-transition-base:     var(--sri-prim-duration-base) var(--sri-prim-easing-standard);
  --sri-transition-slow:     var(--sri-prim-duration-slow) var(--sri-prim-easing-standard);
}


/* ═══════════════════════════════════════════════
   LAYER 3: Component Tokens (组件级)
   具体UI组件的变量
   ═══════════════════════════════════════════════ */

:root {
  /* ── 按钮 ── */
  --sri-btn-padding-y:        var(--sri-prim-space-sm);
  --sri-btn-padding-x:        var(--sri-prim-space-md);
  --sri-btn-radius:           var(--sri-radius);
  --sri-btn-font-size:        var(--sri-prim-font-size-sm);
  --sri-btn-font-weight:      var(--sri-prim-font-weight-medium);
  --sri-btn-primary-bg:       var(--sri-color-primary);
  --sri-btn-primary-color:    var(--sri-color-text-inverse);
  --sri-btn-primary-hover-bg: var(--sri-color-primary-hover);
  --sri-btn-secondary-bg:     var(--sri-color-surface-card);
  --sri-btn-secondary-color:  var(--sri-color-text-primary);
  --sri-btn-secondary-border: var(--sri-color-border);
  --sri-btn-disabled-opacity: 0.5;

  /* ── 卡片 ── */
  --sri-card-bg:              var(--sri-color-surface-card);
  --sri-card-radius:          var(--sri-radius-lg);
  --sri-card-shadow:          var(--sri-shadow-card);
  --sri-card-padding:         var(--sri-prim-space-lg);

  /* ── 输入框 ── */
  --sri-input-bg:             var(--sri-color-surface-input);
  --sri-input-border:         var(--sri-color-border);
  --sri-input-focus-border:   var(--sri-color-border-focus);
  --sri-input-radius:         var(--sri-radius);
  --sri-input-padding:        var(--sri-prim-space-sm) var(--sri-prim-space-md);

  /* ── 弹窗 ── */
  --sri-modal-bg:             var(--sri-color-surface-card);
  --sri-modal-radius:         var(--sri-radius-lg);
  --sri-modal-shadow:         var(--sri-shadow-modal);
  --sri-modal-padding:        var(--sri-prim-space-xl);
  --sri-modal-overlay:        var(--sri-color-surface-overlay);
  --sri-modal-max-width:      640px;
  --sri-modal-z-index:        9999;

  /* ── 导航 ── */
  --sri-nav-height:           56px;
  --sri-nav-bg:               var(--sri-color-surface-card);
  --sri-nav-border:           var(--sri-color-border-light);

  /* ── 页脚 ── */
  --sri-footer-padding:       var(--sri-prim-space-lg);
  --sri-footer-color:         var(--sri-color-text-muted);
  --sri-footer-font-size:     var(--sri-prim-font-size-xs);

  /* ── 排版组件 ── */
  --sri-heading-color:        var(--sri-prim-neutral-800);
  --sri-heading-weight:       var(--sri-prim-font-weight-bold);
  --sri-paragraph-spacing:    var(--sri-prim-space-sm);
}