/* TeliportMe marketing design tokens — see docs/MARKETING_BRAND_SYSTEM_PLAN.md §0.
   Phase 0: definitions only. Nothing reads these yet; Phase 1 wires them into base.css/custom.css. */
:root {
  /* surfaces */
  --paper: #F9F7F7;
  --white: #FFFFFF;
  --ink: #1A1A2E;
  --ink-rgb: 26, 26, 46;    /* ink as numbers, for tints: rgba(var(--ink-rgb), 0.12) */
  --navy: #16213E;
  --blue: #0F3460;

  /* text on each surface */
  --text-on-paper: var(--ink);
  --text-on-paper-2: rgba(26, 26, 46, 0.70);
  --text-on-paper-3: rgba(26, 26, 46, 0.50);
  --text-on-ink: var(--paper);
  --text-on-ink-2: rgba(249, 247, 247, 0.72);
  --text-on-ink-3: rgba(249, 247, 247, 0.50);

  /* hairlines */
  --hair-on-paper: rgba(26, 26, 46, 0.12);
  --hair-on-ink: rgba(249, 247, 247, 0.14);

  /* coral ramp (OKLCH-even; darks cooled toward the ink) */
  --coral-900: #9B2049;
  --coral-800: #B61F4E;
  --coral-700: #D02A54; /* links & body text on light (4.75:1 on paper) */
  --coral-500: #E94560; /* the highlight: dot, units, rules, large text */
  --coral-400: #FA7381; /* links & body text on dark (6.4:1 on ink) */
  --coral-300: #FCA0A9;
  --coral-200: #FDCDD0;
  --coral-100: #FFEDED;
  --hl: var(--coral-500);
  --hl-on-paper: var(--coral-700);
  --hl-on-ink: var(--coral-400);

  /* type scale (Metropolis) */
  --font: Metropolis, system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-display: clamp(52px, 5.2vw, 74px);
  --fs-display-m: 43px;
  --fs-h2: clamp(36px, 3.4vw, 48px);
  --fs-h3: 24px;
  --fs-lead: 18px;
  --fs-body: 16px;
  --fs-micro: 13px;
  --fs-eyebrow: 12px;
  --fs-stat: 72px;
  --fs-stat-m: 64px;
  --track-display: -0.03em;
  --track-h2: -0.02em;
  --track-stat: -0.04em;
  --track-eyebrow: 0.18em;
  --lh-display: 0.98;
  --lh-h2: 1.05;
  --lh-body: 1.5;

  /* shape */
  --r-button: 4px;
  --r-card: 6px;
  --r-pill: 999px;
  --shadow-plate: 0 48px 90px -36px rgba(0, 0, 0, 0.7);

  /* motion */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur: 180ms;
}