/* Design tokens measured from ui/*.png — see design/ANALYSIS.md */

:root {
  /* layout: design viewport is 1920 with a 1440 content column */
  --page-max-width: 1440px;
  --page-gutter: clamp(20px, 4vw, 64px);
  --header-height: 80px;

  /* palette (ui/标准规范.png) */
  --c-black: #000000;
  --c-gray: #737373;
  --c-gray-light: #e8e8e8;
  --c-white: #ffffff;
  --c-red: #ff0000;

  /* measured section colours */
  --c-section-gray: #e0e0e0;
  --c-card: #f2f2f2;
  --c-line: #bfbfbf;
  --c-header-bg: rgb(255 255 255 / 75%);

  --font-sans: 'PRISMORA Sans', 'HarmonyOS Sans SC', 'PingFang SC', 'Microsoft YaHei',
    'Hiragino Sans GB', system-ui, sans-serif;

  /* type scale */
  --fs-banner: 60px;
  --fs-banner-sub: 32px;
  --fs-h1: 48px;
  --fs-h1-alt: 44px;
  --fs-h2: 36px;
  --fs-h3: 28px;
  --fs-body: 18px;
  --fs-nav: 16px;
  --fs-note: 14px;

  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;
  --fw-black: 900;

  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 240ms;
  --dur-slow: 480ms;

  /* fixed-ratio composition stages scale from this unit */
  --stage-unit: 1px;
}

@media (max-width: 1024px) {
  :root {
    --fs-banner: 44px;
    --fs-banner-sub: 24px;
    --fs-h1: 36px;
    --fs-h1-alt: 32px;
    --fs-h2: 28px;
    --fs-h3: 22px;
    --fs-body: 16px;
  }
}

@media (max-width: 768px) {
  :root {
    --header-height: 60px;
    --fs-banner: 34px;
    --fs-banner-sub: 18px;
    --fs-h1: 26px;
    --fs-h1-alt: 24px;
    --fs-h2: 22px;
    --fs-h3: 18px;
    --fs-body: 15px;
    --fs-note: 12px;
  }
}