/* ============================================================
 * design-tokens.css — 设计令牌（CSS 自定义属性）
 * 融合 Tailwind CSS / Bootstrap / Layui 设计理念
 * ============================================================ */

:root {
  /* ----------------------------------------------------------
   * 颜色系统 — 主色（Zig/Bun Orange 风格）
   * ---------------------------------------------------------- */
  --color-primary-50:  #fff8eb;
  --color-primary-100: #ffefcc;
  --color-primary-200: #ffdc99;
  --color-primary-300: #ffc857;
  --color-primary-400: #ffb833;
  --color-primary-500: #f7a41d;
  --color-primary-600: #d4891a;
  --color-primary-700: #b06f15;
  --color-primary-800: #8c5610;
  --color-primary-900: #6b4010;

  /* ----------------------------------------------------------
   * 颜色系统 — 语义色
   * ---------------------------------------------------------- */
  /* 成功 / 绿色 */
  --color-success-50:  #ecfdf5;
  --color-success-100: #d1fae5;
  --color-success-200: #a7f3d0;
  --color-success-300: #6ee7b7;
  --color-success-400: #34d399;
  --color-success-500: #22c55e;
  --color-success-600: #16a34a;
  --color-success-700: #047857;
  --color-success-800: #065f46;
  --color-success-900: #064e3b;

  /* 警告 / 琥珀色 */
  --color-warning-50:  #fffbeb;
  --color-warning-100: #fef3c7;
  --color-warning-200: #fde68a;
  --color-warning-300: #fcd34d;
  --color-warning-400: #fbbf24;
  --color-warning-500: #f59e0b;
  --color-warning-600: #d97706;
  --color-warning-700: #b45309;
  --color-warning-800: #92400e;
  --color-warning-900: #78350f;

  /* 危险 / 红色 */
  --color-danger-50:  #fef2f2;
  --color-danger-100: #fee2e2;
  --color-danger-200: #fecaca;
  --color-danger-300: #fca5a5;
  --color-danger-400: #f87171;
  --color-danger-500: #ef4444;
  --color-danger-600: #dc2626;
  --color-danger-700: #b91c1c;
  --color-danger-800: #991b1b;
  --color-danger-900: #7f1d1d;

  /* 信息 / 蓝色 */
  --color-info-50:  #eff6ff;
  --color-info-100: #dbeafe;
  --color-info-200: #bfdbfe;
  --color-info-300: #93c5fd;
  --color-info-400: #60a5fa;
  --color-info-500: #3b82f6;
  --color-info-600: #2563eb;
  --color-info-700: #1d4ed8;
  --color-info-800: #1e40af;
  --color-info-900: #1e3a8a;

  /* 中性色 */
  --color-gray-50:  #f9fafb;
  --color-gray-100: #f3f4f6;
  --color-gray-200: #e5e7eb;
  --color-gray-300: #d1d5db;
  --color-gray-400: #9ca3af;
  --color-gray-500: #6b7280;
  --color-gray-600: #4b5563;
  --color-gray-700: #374151;
  --color-gray-800: #1f2937;
  --color-gray-900: #111827;
  --color-gray-950: #030712;

  /* ----------------------------------------------------------
   * 暗色主题（后台管理面板）— Zig/Bun Dark
   * ---------------------------------------------------------- */
  --dark-bg:            #0a0a0a;
  --dark-bg-secondary:  #111111;
  --dark-bg-tertiary:   #1a1a1a;
  --dark-bg-card:       #141414;
  --dark-bg-hover:      #1f1f1f;
  --dark-bg-input:      #111111;
  --dark-border:        #2a2a2a;
  --dark-border-light:  #1f1f1f;
  --dark-text:          #e8e8e8;
  --dark-text-secondary:#888888;
  --dark-text-muted:    #555555;

  /* ----------------------------------------------------------
   * 浅色主题（前台展示）
   * ---------------------------------------------------------- */
  --light-bg:            #fafafa;
  --light-bg-secondary:  #ffffff;
  --light-bg-tertiary:   #f5f5f7;
  --light-border:        #e5e5ea;
  --light-text:          #1a1a2e;
  --light-text-secondary:#4a4a68;
  --light-text-muted:    #8a8aa3;

  /* ----------------------------------------------------------
   * 间距系统（Tailwind 风格，4px 基准）
   * ---------------------------------------------------------- */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ----------------------------------------------------------
   * 圆角
   * ---------------------------------------------------------- */
  --radius-none: 0;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   20px;
  --radius-2xl:  24px;
  --radius-full: 9999px;

  /* ----------------------------------------------------------
   * 阴影 — Dark theme
   * ---------------------------------------------------------- */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.3);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.6);
  --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.2);

  /* ----------------------------------------------------------
   * 字体
   * ---------------------------------------------------------- */
  --font-sans:  'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --font-serif: 'Noto Serif SC', Georgia, 'Times New Roman', serif;
  --font-mono:  'Fira Code', 'JetBrains Mono', Consolas, 'Courier New', monospace;

  /* 字号 */
  --text-xs:   0.75rem;    /* 12px */
  --text-sm:   0.875rem;   /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-lg:   1.125rem;   /* 18px */
  --text-xl:   1.25rem;    /* 20px */
  --text-2xl:  1.5rem;     /* 24px */
  --text-3xl:  1.875rem;   /* 30px */
  --text-4xl:  2.25rem;    /* 36px */
  --text-5xl:  3rem;       /* 48px */

  /* 字重 */
  --font-light:    300;
  --font-normal:   400;
  --font-medium:   500;
  --font-semibold: 600;
  --font-bold:     700;
  --font-extrabold:800;

  /* 行高 */
  --leading-none:     1;
  --leading-tight:    1.25;
  --leading-snug:     1.375;
  --leading-normal:   1.5;
  --leading-relaxed:  1.625;
  --leading-loose:    2;

  /* 字间距 */
  --tracking-tighter: -0.05em;
  --tracking-tight:   -0.025em;
  --tracking-normal:   0;
  --tracking-wide:     0.025em;
  --tracking-wider:    0.05em;

  /* ----------------------------------------------------------
   * 过渡动画
   * ---------------------------------------------------------- */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ----------------------------------------------------------
   * 布局尺寸
   * ---------------------------------------------------------- */
  --sidebar-width:     260px;
  --sidebar-collapsed: 72px;
  --header-height:     64px;
  --content-max-width: 1200px;

  /* ----------------------------------------------------------
   * Z-index 层级（Bootstrap 风格）
   * ---------------------------------------------------------- */
  --z-dropdown:       100;
  --z-sticky:         200;
  --z-fixed:          300;
  --z-offcanvas:      350;
  --z-modal-backdrop: 400;
  --z-modal:          500;
  --z-popover:        600;
  --z-tooltip:        700;
  --z-toast:          800;
}

/* ----------------------------------------------------------
 * 暗色主题令牌覆盖（添加 .dark 类时激活）
 * ---------------------------------------------------------- */
.dark {
  --color-bg:            var(--dark-bg);
  --color-bg-secondary:  var(--dark-bg-secondary);
  --color-bg-tertiary:   var(--dark-bg-tertiary);
  --color-bg-card:       var(--dark-bg-card);
  --color-bg-hover:      var(--dark-bg-hover);
  --color-bg-input:      var(--dark-bg-input);
  --color-bg-elevated:   #1a1a1a;
  --color-bg-active:     #252525;
  --color-border:        var(--dark-border);
  --color-border-light:  var(--dark-border-light);
  --color-border-focus:  #f7a41d;
  --color-text:          var(--dark-text);
  --color-text-secondary:var(--dark-text-secondary);
  --color-text-muted:    var(--dark-text-muted);
  --color-text-inverse:  #0a0a0a;
}

/* ----------------------------------------------------------
 * 浅色主题令牌覆盖（默认）
 * ---------------------------------------------------------- */
:root {
  --color-bg:            var(--light-bg);
  --color-bg-secondary:  var(--light-bg-secondary);
  --color-bg-tertiary:   var(--light-bg-tertiary);
  --color-border:        var(--light-border);
  --color-text:          var(--light-text);
  --color-text-secondary:var(--light-text-secondary);
  --color-text-muted:    var(--light-text-muted);
}