/* ============================================================
   XinYuan Platform - Design Tokens (CSS Custom Properties)
   Reference: 58.com visual style adapted for Vietnam market
   This file is reusable in Vue/Vite production builds.
   ============================================================ */

:root {
  /* ── Brand Colors ── */
  --color-primary: #ff552e;
  --color-primary-hover: #e64a27;
  --color-primary-active: #cc4020;
  --color-primary-light: #fff0ec;
  --color-primary-bg: #fff8f6;

  /* ── Semantic Colors ── */
  --color-success: #00b38a;
  --color-success-light: #e6f9f4;
  --color-warning: #ff8f00;
  --color-warning-light: #fff5e6;
  --color-error: #ff3b30;
  --color-error-light: #ffeded;
  --color-info: #0478ab;
  --color-info-light: #e6f4fa;

  /* ── Text Colors ── */
  --color-text-primary: #222222;
  --color-text-regular: #333333;
  --color-text-secondary: #666666;
  --color-text-tertiary: #999999;
  --color-text-placeholder: #bcbcbc;
  --color-text-inverse: #ffffff;
  --color-text-link: #0478ab;
  --color-text-link-hover: #035f8a;

  /* ── Background Colors ── */
  --color-bg-page: #f5f5f5;
  --color-bg-white: #ffffff;
  --color-bg-light: #fafafa;
  --color-bg-hover: #f0f0f0;
  --color-bg-mask: rgba(0, 0, 0, 0.5);

  /* ── Border Colors ── */
  --color-border: #e8e8e8;
  --color-border-light: #f0f0f0;
  --color-border-dark: #d9d9d9;

  /* ── Enterprise / Verified Badge ── */
  --color-enterprise: #0478ab;
  --color-verified: #00b38a;

  /* ── Category Colors (for category icons) ── */
  --color-cat-building: #ff7043;
  --color-cat-machinery: #f57c00;
  --color-cat-daily: #ab47bc;
  --color-cat-tourism: #42a5f5;
  --color-cat-accommodation: #26c6da;
  --color-cat-food: #ef5350;
  --color-cat-housing: #26a69a;
  --color-cat-vehicle: #5c6bc0;
  --color-cat-furniture: #8d6e63;
  --color-cat-secondhand: #ff8a65;
  --color-cat-jobs: #66bb6a;
  --color-cat-community: #ef5350;

  /* ── Typography ── */
  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", "Noto Sans Vietnamese",
    "Noto Sans SC", "Noto Sans JP", "Noto Sans KR", sans-serif;
  --font-family-mono: "SF Mono", SFMono-Regular, Consolas, "Liberation Mono",
    Menlo, monospace;

  --font-size-xs: 11px;
  --font-size-sm: 12px;
  --font-size-base: 14px;
  --font-size-md: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 20px;
  --font-size-2xl: 24px;
  --font-size-3xl: 30px;

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;

  /* ── Spacing ── */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ── Border Radius ── */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* ── Shadows ── */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.12);
  --shadow-xl: 0 8px 24px rgba(0, 0, 0, 0.16);

  /* ── Z-Index Scale ── */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-modal-backdrop: 400;
  --z-modal: 500;
  --z-popover: 600;
  --z-tooltip: 700;
  --z-toast: 800;
  --z-guide-bubble: 9999;

  /* ── Transitions ── */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.25s ease;
  --transition-slow: 0.35s ease;

  /* ── Layout (PC) ── */
  --pc-content-width: 1200px;
  --pc-header-height: 60px;
  --pc-topbar-height: 36px;
  --pc-sidebar-width: 200px;

  /* ── Layout (Mobile) ── */
  --mobile-header-height: 48px;
  --mobile-tabbar-height: 56px;
  --mobile-safe-bottom: env(safe-area-inset-bottom, 0px);
}