/*
 * tokens.css — Upinion design tokens
 * Source of truth: company/brand/brand-guide.md (status: proposed, awaiting Pinar
 * sign-off as of 2026-07-21). Do not hand-edit hex values here without updating the
 * brand guide first — see CLAUDE.md "Source of Truth & Sync Rules".
 */

:root {
  /* Colour — primary */
  --color-teal: #1A6B6B;
  --color-teal-dark: #0F4444;
  --color-off-white: #F5F5F0;
  --color-near-black: #1C1C1C;

  /* Colour — secondary */
  --color-orange: #E07B39;
  --color-sand: #D9C9A8;
  --color-grey: #6B7280;

  /* Colour — semantic aliases */
  --color-bg: var(--color-off-white);
  --color-bg-invert: var(--color-teal);
  --color-text: var(--color-near-black);
  --color-text-inverse: var(--color-off-white);
  --color-text-muted: var(--color-grey);
  --color-link: var(--color-teal);
  --color-accent: var(--color-orange);
  --color-border: var(--color-sand);
  --color-surface: #FFFFFF;

  /* Typography */
  --font-body: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-serif: "IBM Plex Serif", Georgia, "Times New Roman", serif;

  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-h1: clamp(2rem, 4vw + 1rem, 3rem);
  --fs-h2: clamp(1.5rem, 2vw + 1rem, 2rem);
  --fs-h3: clamp(1.15rem, 1vw + 1rem, 1.5rem);
  --fs-cover-title: clamp(2.25rem, 5vw + 1rem, 3.5rem);
  --fs-cover-subtitle: 1.125rem;

  --lh-body: 1.5;
  --lh-heading: 1.2;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;

  --radius-sm: 4px;
  --radius-md: 8px;

  --max-width: 1120px;

  --shadow-sm: 0 1px 3px rgba(28, 28, 28, 0.08);
  --shadow-md: 0 4px 16px rgba(28, 28, 28, 0.10);
}