:root {
  --color-brand: #f83a3a;
  --color-brand-hot: #ff4b35;
  --color-brand-deep: #b72e2e;
  --color-brand-soft: #fff0f0;
  --color-brand-warm: #fff4e4;
  --color-page: #f5f6f8;
  --color-surface: #ffffff;
  --color-surface-pressed: #f7f7f7;
  --color-text: #1f1f1f;
  --color-text-secondary: #666666;
  --color-text-muted: #999999;
  --color-border: #eeeeee;
  --color-mask: rgba(0, 0, 0, 0.55);
  --color-progress: #f6b23a;
  --color-score: #ff8a1f;
  --color-info: #3f7bff;
  --color-success: #20b26b;
  --color-warn: #ff9f1c;
  --color-disabled: #c8c8c8;

  --font-family-mobile: "PingFang SC", "Noto Sans CJK SC", system-ui, sans-serif;

  --text-title: 18px;
  --text-section: 16px;
  --text-card-title: 15px;
  --text-body: 14px;
  --text-caption: 12px;
  --text-tag: 11px;

  --font-regular: 400;
  --font-medium: 500;
  --font-semibold: 600;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-sheet: 16px 16px 0 0;
  --radius-pill: 999px;

  --viewport-min: 320px;
  --viewport-design: 375px;
  --breakpoint-tablet: 768px;
  --breakpoint-desktop: 1200px;

  --nav-height: 44px;
  --control-height: 44px;
  --filter-height: 44px;
  --touch-target: 44px;
  --page-padding-x: 16px;
  --card-padding: 12px;
  --card-gap: 12px;
  --layout-gap: 16px;
  --page-padding-x-fluid: clamp(16px, 4vw, 32px);
  --card-padding-fluid: clamp(12px, 2.8vw, 20px);
  --card-gap-fluid: clamp(12px, 2vw, 20px);
  --section-gap-fluid: clamp(24px, 4vw, 40px);
  --layout-max-width: 1200px;
  --content-max-width: 960px;
  --content-reading-max-width: 720px;
  --sheet-max-width: 640px;
  --card-min-width: 280px;
  --safe-area-bottom: max(12px, env(safe-area-inset-bottom, 0px));

  --shadow-sheet: 0 -8px 24px rgba(0, 0, 0, 0.08);
  --shadow-card-soft: 0 4px 14px rgba(31, 31, 31, 0.04);
  --gradient-brand-warm: linear-gradient(106deg, #fff6f5 0%, #ffe7e6 52%, #fff3dc 100%);
  --gradient-brand-card: linear-gradient(135deg, #ff6a4d 0%, #ff3636 58%, #ff9c51 100%);
  --motion-fast: 160ms;
  --motion-base: 220ms;
}

@media (min-width: 768px) {
  :root {
    --nav-height: 48px;
    --filter-height: 48px;
    --page-padding-x: 24px;
    --card-padding: 16px;
    --card-gap: 16px;
    --layout-gap: 20px;
  }
}

@media (min-width: 1200px) {
  :root {
    --nav-height: 56px;
    --page-padding-x: 32px;
    --card-padding: 20px;
    --card-gap: 20px;
    --layout-gap: 24px;
  }
}