/* ColourChecker · Design Tokens
   Shared across colourchecker.com / jcolour.com / gcolour.com
   Edit here, changes propagate to all three sites. */

:root {
  /* Surfaces */
  --paper: #FAFAF7;
  --paper-2: #F3F3EE;
  --ink: #0F1113;
  --ink-2: #3A3E44;
  --ink-3: #8A8E94;
  --ink-4: #B8BCC0;
  --rule: #D9D9D4;
  --rule-soft: #E8E8E2;

  /* Brand */
  --violet: #7B3F8F;
  --violet-ink: #4A1F5A;
  --violet-soft: #F3EAF5;

  /* Semantic */
  --link: var(--violet);
  --link-hover: var(--violet-ink);

  /* Type scale (desktop) */
  --fs-hero: clamp(44px, 6.4vw, 104px);
  --fs-display: clamp(32px, 4vw, 56px);
  --fs-h2: clamp(24px, 2.4vw, 36px);
  --fs-h3: 20px;
  --fs-body: 16px;
  --fs-small: 13px;
  --fs-micro: 11px;

  /* Type families */
  --font-sans-en: "Inter Tight", "Neue Haas Grotesk Text", system-ui, sans-serif;
  --font-sans-cn: "Noto Sans SC", "Source Han Sans SC", "PingFang SC", sans-serif;
  --font-serif-en: "Source Serif 4", "Source Serif Pro", Georgia, serif;
  --font-serif-cn: "Noto Serif SC", "Source Han Serif SC", "Songti SC", serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Rhythm */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 72px;
  --space-8: 120px;
  --space-9: 168px;

  /* Layout */
  --page-pad: clamp(24px, 5vw, 72px);
  --max-width: 1440px;
  --col-gap: 48px;

  /* Lines */
  --hairline: 1px solid var(--rule);
  --hairline-ink: 1px solid var(--ink);
}