/* ─────────────────────────────────────────────────────────────────────────
 * design-systems/whatsapp-ios/tokens.css
 * Reviewed against the source DESIGN.md on 2026-10-13.
 *
 * Encrypted chat. WhatsApp Green #25D366, mint-leaf outgoing bubbles #D9FDD3, voice-message waveform, blue double-check read receipts
 *
 * Extracted from awesome-ios-design-md (MIT, Copyright (c) 2026 Muhammed Eliwat).
 * Primary mode: light. Sizes are iOS points mapped 1:1 to CSS px.
 * ─────────────────────────────────────────────────────────────────── */

:root {
  /* Surface */
  --bg: #FFFFFF;
  --surface: #F7F8FA;
  --surface-warm: color-mix(in oklab, var(--surface), var(--fg) 6%);

  /* Foreground */
  --fg: #111B21;
  --fg-2: color-mix(in oklab, var(--fg), var(--bg) 15%);
  --muted: #667781;
  --meta: color-mix(in oklab, var(--muted), var(--bg) 25%);

  /* Border */
  --border: #E9EDEF;
  --border-soft: color-mix(in oklab, var(--border), var(--bg) 50%);

  /* Accent */
  --accent: #25D366;
  --accent-on: #FFFFFF;
  --accent-hover: color-mix(in oklab, var(--accent), black 8%);
  --accent-active: color-mix(in oklab, var(--accent), black 14%);

  /* Semantic */
  --success: #34C759;
  --warn: #FF9500;
  --danger: #F15C6D;

  /* Typography — fonts */
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, monospace;

  /* Typography — type scale (from §3's hierarchy table) */
  --text-xs: 10px;
  --text-sm: 16px;
  --text-base: 17px;
  --text-md: 17px;
  --text-lg: 34px;
  --text-xl: 34px;
  --text-2xl: 34px;
  --text-3xl: 34px;
  --text-4xl: 44px;

  /* Typography — leading & tracking */
  --leading-body: 1.4;
  --leading-tight: 1.15;
  --tracking-display: -0.01em;

  /* Radius (from §4's corner radii) */
  --radius-sm: 10px;
  --radius-md: 12px;
  --radius-lg: 24px;
  --radius-pill: 9999px;

  /* Layout — a phone screen; desktop/tablet values only matter if a page is
   * stretched beyond one. */
  --section-y-desktop: 64px;
  --section-y-tablet: 40px;
  --section-y-phone: 24px;
  --container-max: 430px;
  --container-gutter-desktop: 16px;
  --container-gutter-tablet: 16px;
  --container-gutter-phone: 16px;
}