:root {

  --ink-strong: #202020;
  --ink: #202020;
  --ink-body: #727272;
  --ink-muted: #707070;

  --line: #dadada;
  --line-soft: #dedede;

  --canvas: #ffffff;
  --surface: #f7f7f7;
  --surface-frame: #eff0f0;
  --inverse: #000000;
  --on-inverse: #ffffff;
  --on-inverse-muted: #757a83;

  --success: #10803f;
  --warn: #9a6b00;
  --error: #d32f2f;

  --font: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui,
    'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif;
  --tracking: -0.02em;
  --fs-display: clamp(32px, 4.6vw, 64px);
  --fs-display-sm: clamp(28px, 3.6vw, 44px);
  --fs-lead: clamp(16px, 2.3vw, 32px);
  --fs-section: clamp(20px, 2.4vw, 30px);
  --fs-eyebrow: clamp(14px, 1.3vw, 19px);
  --fs-title: clamp(18px, 1.75vw, 26px);
  --fs-body: clamp(16px, 1.15vw, 18px);
  --fs-caption: 14px;
  --lh-base: 1.5;
  --lh-tight: 1.25;
  --lh-heading: 1.37;
  --lh-body: 1.6;

  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;

  --section-pad: clamp(88px, 12vw, 230px);

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-full: 999px;

  --container: 1180px;
  --container-wide: 1340px;
  --gutter: 24px;
  --header-h: 76px;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 0.15s;
  --dur-reveal: 0.7s;
  --reveal-step: 90ms;
  --reveal-shift: 18px;

  color-scheme: light;
}

@media (max-width: 640px) {
  :root {
    --gutter: 20px;
    --header-h: 60px;
  }
}

:root,
[data-product='haip'] {
  --key: #111111;
  --key-hover: #333333;
  --key-soft: #f0f0f0;
  --key-tint: #fafafa;
  --key-ink: #111111;
  --on-key: #ffffff;
  --accent: initial;
  --on-accent: initial;
}

[data-product='studio'] {
  --key: #0425ff;
  --key-hover: #0318cc;
  --key-soft: #eef1ff;
  --key-tint: #f6f8ff;
  --key-ink: #0425ff;
  --on-key: #ffffff;
  --accent: #f3ff94;
  --on-accent: #111111;
}

[data-product='page'] {
  --key: #ed1e24;
  --key-hover: #df0006;
  --key-soft: #fff2f2;
  --key-tint: #fff8f8;
  --key-ink: #df0006;
  --on-key: #ffffff;
  --accent: initial;
  --on-accent: initial;
}

[data-product='q'] {
  --key: #ffae00;
  --key-hover: #d99400;
  --key-soft: #fff4dc;
  --key-tint: #fffaf0;
  --key-ink: #7a5200;
  --on-key: #111111;
  --accent: initial;
  --on-accent: initial;
}