:root {
  /* Colors */
  --color-primary: #FFB759;
  --color-dark: #23282E;
  --color-secondary: #373C42;
  --color-muted: #889099;
  --color-bg-page: #FFFFFF;
  --color-bg-header: #F7F7F7;
  --color-bg-component: #F7F7F7;
  --color-btn-default: #E1E4E8;
  --color-btn-pressed: #C1C6CC;
  --color-btn-disabled: #F0F1F2;
  --color-info-bar: #E1E4E8;
  --color-divider: #C2C2C2;
  --color-screenshot-placeholder: #333333;

  /* Typography — fluid between 320px and 430px viewports */
  --font-family: 'Noto Sans SC', 'PingFang SC', -apple-system, sans-serif;
  --font-h1-size: clamp(26px, 7vw, 32px);
  --font-h1-weight: 500;
  --font-h1-lh: 1.5;
  --font-h2-size: clamp(24px, 6.5vw, 28px);
  --font-h2-weight: 500;
  --font-h2-lh: 1.5;
  --font-title-xl-size: clamp(17px, 4.8vw, 20px);
  --font-title-xl-weight: 500;
  --font-title-xl-lh: 1.5;
  --font-title-primary-size: clamp(16px, 4.3vw, 18px);
  --font-title-primary-weight: 500;
  --font-title-primary-lh: 1.5;
  --font-body-size: clamp(14px, 3.8vw, 16px);
  --font-body-weight: 400;
  --font-body-lh: 1.5;
  --font-btn-size: clamp(17px, 4.8vw, 20px);
  --font-btn-weight: 500;
  --font-btn-lh: 1.5;

  /* Spacing — fluid */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: clamp(8px, 2.5vw, 10px);
  --space-lg: clamp(16px, 5vw, 20px);
  --space-xl: clamp(28px, 8vw, 40px);
  --space-2xl: clamp(48px, 15vw, 80px);

  /* Layout — fluid */
  --page-max-width: 480px;
  --content-padding: clamp(16px, 5vw, 20px);
  --header-height: clamp(56px, 16vw, 70px);
  --btn-height: clamp(56px, 16vw, 70px);
  --btn-radius: 8px;
  --scenario-size: clamp(88px, 26vw, 110px);
  --scenario-radius: 60px;
  --icon-size: clamp(38px, 11vw, 48px);
  --divider-height: 1px;
  --screenshot-radius: 12px;
  --info-bar-radius: 8px;
}