/* ===========================================================
   XINPIANCHANG CLONE — Design Tokens
   All values measured from live https://www.xinpianchang.com
   (Tailwind default palette + site custom tokens)
   =========================================================== */
:root {
  /* ---- Brand ---- */
  --color-primary: #E74B3B;            /* rgb(231 75 59) — text-primary-200 */
  --color-primary-rgb: 231, 75, 59;
  --color-primary-dark: #C9352A;
  --color-primary-bg: rgba(231, 75, 59, 0.08);   /* red-100 style chip bg */

  /* ---- Greyscale (Tailwind defaults, verified) ---- */
  --color-bg: #FFFFFF;
  --c-panel: #FFFFFF;                  /* 卡片/面板/下拉等"白底"，供暗色主题整体换底 */
  --color-surface: #F9FAFB;            /* gray-50  rgb(249 250 251) */
  --color-surface-2: #F3F4F6;          /* gray-100 rgb(243 244 246) */
  --color-text: #111827;               /* gray-900 */
  --color-text-strong: #1F2937;        /* gray-800 */
  --color-text-secondary: #374151;     /* gray-700 */
  --color-text-muted: #6B7280;         /* gray-500 */
  --color-text-light: #9CA3AF;         /* gray-400 */
  --color-text-faint: #D1D5DB;         /* gray-300 */
  --color-border: #E5E7EB;             /* gray-200 */
  --color-border-strong: #D1D5DB;      /* gray-300 */

  /* ---- Layout (measured) ---- */
  --header-h: 60px;                    /* h-15 = 3.75rem @ desktop */
  --header-h-mobile: 48px;             /* h-12 = 3rem */
  --header-px: 24px;                   /* md:px-6 */
  --header-px-mobile: 16px;            /* px-4 */
  --page-max: 1440px;                  /* max-width:1440px (6 occ.) */
  --content-px: 24px;
  --content-px-mobile: 16px;
  --mega-menu-h: 484px;                /* h-[484px] */

  /* ---- Radius (Tailwind scale) ---- */
  --radius-sm: 4px;                    /* rounded */
  --radius-md: 6px;                    /* rounded-md */
  --radius-lg: 8px;                    /* rounded-lg */
  --radius-xl: 12px;                   /* rounded-xl */
  --radius-2xl: 16px;
  --radius-full: 9999px;

  /* ---- Typography ---- */
  --font-primary: -apple-system, BlinkMacSystemFont, "Noto Sans", "Helvetica Neue",
    Helvetica, "Nimbus Sans L", Arial, "Liberation Sans", "PingFang SC",
    "Hiragino Sans GB", "Noto Sans CJK SC", "Source Han Sans SC",
    "Source Han Sans CN", "Microsoft YaHei", "WenQuanYi Micro Hei",
    "WenQuanYi Zen Hei", "ST Heiti", "SimHei", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", "Courier New", monospace;

  --fs-xs: 12px;
  --fs-sm: 14px;
  --fs-base: 16px;
  --fs-md: 18px;
  --fs-lg: 20px;
  --fs-xl: 24px;
  --fs-2xl: 28px;
  --fs-3xl: 32px;

  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --lh-tight: 1.2;
  --lh-snug: 1.4;
  --lh-normal: 1.6;

  /* ---- Shadows (from live CSS) ---- */
  --shadow-dropdown: 0 12px 24px rgba(28, 28, 30, 0.08), 0 2px 8px rgba(28, 28, 30, 0.08);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-hover: 0 8px 24px rgba(17, 24, 39, 0.12);

  /* ---- Z-index ---- */
  --z-header: 1000;
  --z-dropdown: 1100;
  --z-modal: 2000;
  --z-toast: 3000;
}