/* ===== main.css ===== */
/* CSS变量级联系统 - 5层结构 */
/* L1: 基础变量 → L2: 主题色覆盖 → L3: 组件变量 → L4: 大字版覆盖 → L5: 内联覆盖 */

:root {
  /* --- L1: 基础设计系统 --- */
  /* 颜色 - 灰度 */
  --clr-white: #FFFFFF;
  --clr-black: #000000;
  --clr-gray-50: #FAFAFA;
  --clr-gray-100: #F5F5F5;
  --clr-gray-200: #EEEEEE;
  --clr-gray-300: #E0E0E0;
  --clr-gray-400: #BDBDBD;
  --clr-gray-500: #9E9E9E;
  --clr-gray-600: #757575;
  --clr-gray-700: #616161;
  --clr-gray-800: #424242;
  --clr-gray-900: #212121;

  /* --- L2: 主题色（可被theme-*.css覆盖） --- */
  --clr-primary: #8B4513;        /* 主色 */
  --clr-primary-light: #A0522D;
  --clr-primary-dark: #6B3410;
  --clr-primary-contrast: #FFFFFF;

  --clr-secondary: #C8A96E;      /* 辅色 */
  --clr-secondary-light: #DBBF7E;
  --clr-secondary-dark: #B8924A;

  --clr-accent: #F5A623;         /* 强调色 */
  --clr-accent-contrast: #FFFFFF;

  --clr-bg: #FAF7F2;             /* 页面背景 */
  --clr-surface: #FFFFFF;        /* 卡片背景 */
  --clr-surface-hover: #F5F0EB;
  --clr-border: #E8D5C0;
  --clr-text: #2C2C2C;           /* 正文色 */
  --clr-text-secondary: #6B6B6B;
  --clr-text-muted: #9B9B9B;
  --clr-success: #4CAF50;
  --clr-warning: #FF9800;
  --clr-error: #F44336;

  /* 排版 */
  --ff-body: 'Noto Sans SC', 'PingFang SC', -apple-system, sans-serif;
  --ff-heading: 'Noto Sans SC', 'PingFang SC', sans-serif;
  --ff-serif: 'Noto Serif SC', 'Source Han Serif SC', 'SimSun', serif;
  --fs-base: 16px;
  --fs-xs: 12px;
  --fs-sm: 14px;
  --fs-md: 16px;
  --fs-lg: 20px;
  --fs-xl: 24px;
  --fs-2xl: 32px;
  --fs-3xl: 40px;
  --fs-4xl: 48px;
  --lh-tight: 1.2;
  --lh-normal: 1.6;
  --lh-relaxed: 1.8;
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* 间距 */
  --space-2: 2px;
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-64: 64px;
  --space-80: 80px;
  --space-96: 96px;

  /* 圆角 */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-full: 9999px;

  /* 阴影 */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.06);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.08);
  --shadow-xl: 0 16px 48px rgba(0,0,0,0.10);
  --shadow-card: 0 2px 8px rgba(0,0,0,0.04), 0 4px 16px rgba(0,0,0,0.04);

  /* 动画 */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 150ms;
  --dur-normal: 300ms;
  --dur-slow: 500ms;
  --dur-slower: 800ms;

  /* 响应式断点（供media query参考） */
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;

  /* 容器宽度 */
  --container-max: 1200px;
  --container-padding: var(--space-16);

  /* Z-index */
  --z-base: 1;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-modal-backdrop: 300;
  --z-modal: 400;
  --z-toast: 500;
}

/* L3: 组件变量 */
:root {
  --hero-height: 90vh;
  --hero-height-mobile: 70vh;
  --hero-overlay: rgba(0,0,0,0.25);

  --card-padding: var(--space-24);
  --card-radius: var(--radius-xl);
  --card-shadow: var(--shadow-card);
  --card-hover-transform: translateY(-4px);

  --btn-height: 48px;
  --btn-radius: var(--radius-2xl);
  --btn-padding: 0 var(--space-32);
  --btn-font-size: var(--fs-md);
  --btn-font-weight: var(--fw-semibold);

  --section-gap: var(--space-80);
  --section-title-size: var(--fs-3xl);
  --section-subtitle-size: var(--fs-lg);

  --nav-height: 64px;
  --fab-size: 56px;
  --fab-margin: var(--space-20);

  --tier-card-min-height: 280px;
  --tier-icon-size: 48px;

  --gallery-gap: var(--space-12);
  --gallery-columns: 3;
  --panorama-height: 400px;

  --room-card-width: 340px;
  --testimonial-avatar-size: 64px;
  --trust-stat-size: var(--fs-3xl);

  --faq-border: 1px solid var(--clr-border);
  --faq-radius: var(--radius-md);
}