/* ============================================================
   设计令牌基线 (Design Tokens) — 纯变量层
   ------------------------------------------------------------
   本文件仅定义 :root 设计变量，不含任何元素级选择器、不含 reset。
   用途：让所有独立页面（此前未加载 style.css 的 50 个）拥有统一的设计
        词汇（--primary / --sp-4 / --radius 等），为 Phase 2 的
        btn / 吐司 / 配色 token 化迁移铺路。
   重要：本 :root 块须与 style.css 顶部 :root 保持同步，
        直至 Phase 4 将其收敛为唯一真源（@import 或构建合并）。
   注意：因不含元素级选择器，链接本文件【视觉零变化】。
   ============================================================ */

:root {
  /* Colors */
  --c-blue-50: #EFF6FF;  --c-blue-100: #DBEAFE; --c-blue-200: #BFDBFE;
  --c-blue-500: #3B82F6; --c-blue-600: #2563EB; --c-blue-700: #1D4ED8; --c-blue-800: #1E40AF;
  --c-green-50: #F0FDF4; --c-green-500: #22C55E; --c-green-600: #16A34A; --c-green-700: #15803D;
  --c-red-50: #FEF2F2;   --c-red-500: #EF4444;  --c-red-600: #DC2626;  --c-red-700: #B91C1C;
  --c-amber-50: #FFFBEB;  --c-amber-500: #F59E0B; --c-amber-600: #D97706; --c-amber-700: #B45309;
  --c-teal-50: #F0FDFA;   --c-teal-500: #14B8A6;  --c-teal-600: #0D9488;
  --c-slate-50: #F8FAFC;  --c-slate-100: #F1F5F9; --c-slate-200: #E2E8F0;
  --c-slate-300: #CBD5E1; --c-slate-400: #94A3B8; --c-slate-500: #64748B;
  --c-slate-600: #475569; --c-slate-700: #334155; --c-slate-800: #1E293B; --c-slate-900: #0F172A;

  /* Light Theme (default) */
  --bg: var(--c-slate-50);
  --surface: #FFFFFF;
  --surface-hover: var(--c-slate-50);
  --surface-secondary: var(--c-slate-100);
  --text-primary: var(--c-slate-900);
  --text-secondary: var(--c-slate-500);
  --text-tertiary: var(--c-slate-400);
  --border: var(--c-slate-200);
  --border-light: var(--c-slate-100);

  /* Brand */
  --primary: var(--c-blue-600);
  --primary-hover: var(--c-blue-700);
  --primary-light: var(--c-blue-50);
  --primary-ring: rgba(37, 99, 235, 0.15);

  /* Semantic */
  --success: var(--c-green-600);
  --success-light: var(--c-green-50);
  --danger: var(--c-red-600);
  --danger-light: var(--c-red-50);
  --warning: var(--c-amber-600);
  --warning-light: var(--c-amber-50);
  --info: var(--c-teal-600);
  --info-light: var(--c-teal-50);

  /* Layout */
  --sidebar-w: 298px;
  --rail-w: 70px;
  --sidebar-collapsed-w: 0px;
  --topbar-h: 44px;
  --mobile-nav-h: 60px;

  /* Spacing */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px;

  /* Borders */
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --radius-2xl: 24px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.08), 0 2px 4px -2px rgba(0,0,0,0.04);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -4px rgba(0,0,0,0.04);
  --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.04);

  /* Typography */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", "Helvetica Neue", sans-serif;
  --font-mono: "SF Mono", "Fira Code", "Consolas", monospace;

  /* Transitions */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 150ms;
  --duration: 250ms;
  --duration-slow: 400ms;
}

/* ---------- 商城品牌色（category / product-store，方案 A：保留橙，不统一为蓝） ----------
   说明：仅作“单一真源”收口，值与原硬编码逐字一致 → 渲染零变化。
        后续若调整商城橙，只改此处即可，不必逐页改 hex。
   注：两页主橙不同（product-store 主用 #ff5000 系；category 主用 #ff6f00 系），
       故按色阶分别建令牌，避免合并导致视觉偏移。 */
:root {
  --mall-accent:   #ff5000;
  --mall-accent-2: #ff6a00;
  --mall-accent-3: #ff6000;
  --mall-accent-4: #ff6f00;
  --mall-light:    #ff8f00;
  --mall-amber:    #ffb300;
  --mall-dark:     #e65100;
  --mall-dark-2:   #e85d00;
  --mall-deep:     #e64a19;
  --mall-darker:   #c2410c;
}