/* ============================================================
 * tokens.css
 *
 * Single source of truth for brand-level design tokens shared
 * between site.css and caller-profile.css. Both stylesheets
 * load this first; any drift between them now has to be
 * deliberate (a local override) rather than accidental.
 *
 * Scope: ONLY tokens that are genuinely shared.
 *   - Brand colors (orange, teal, ink, cream)
 *   - Typography stacks (Geist / Geist Mono)
 *   - Shared spacing and radius primitives
 *   - Animation easing
 *
 * Component-specific tokens (e.g. caller-profile's --green-soft,
 * site.css's --teal-bg) stay in their respective stylesheets.
 *
 * Tokens override-chain: tokens.css loads first, then site.css
 * or caller-profile.css may override any token by re-declaring
 * it in its own :root block.
 * ============================================================ */

:root {
  /* ---- BRAND COLORS ----
     Orange is the primary CTA / accent. Teal is the proof / success
     color (used in ROI sections and as a "good news" accent). */
  --orange: #F47524;
  --orange-dark: #FF9555;
  --orange-2: #BA4E28;
  --orange-soft: rgba(244, 117, 36, 0.10);
  --orange-tint: rgba(244, 117, 36, 0.14);

  --teal: #4FBFA8;
  --teal-deep: #2E8A7C;

  /* ---- NEUTRALS ----
     Cream tones are the dark-mode backgrounds (the page is
     dark-by-default). Ink tones are the text colors on those
     dark backgrounds. */
  --cream: #0F0D0A;
  --cream-2: #1B1814;
  --ink: #F4F1EC;
  --ink-2: #D8D3CA;
  --ink-3: #B5B0A7;
  --ink-4: #8A857C;
  --ink-muted: #9C9890;
  --muted: #A8A398;
  --soft: #8A857C;
  --white: #FFFFFF;

  /* ---- BORDERS / DIVIDERS ----
     Used across cards, panels, dividers, table rules. */
  --line: rgba(255, 255, 255, 0.10);
  --line-strong: rgba(255, 255, 255, 0.20);
  --line-2: rgba(255, 255, 255, 0.14);

  /* ---- TYPOGRAPHY STACKS ----
     Self-hosted Geist / Geist Mono. @font-face declarations
     live in site.css (and are re-declared in caller-profile.css
     so the iframe document can resolve them from the same
     cached .woff2 files). */
  --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  /* Short aliases that several existing rules already use */
  --mono: var(--font-mono);

  /* ---- SHADOWS ---- */
  --shadow-lg: 0 28px 70px rgba(0, 0, 0, 0.50);
  --shadow-md: 0 10px 28px rgba(0, 0, 0, 0.35);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.30);

  /* ---- RADIUS ---- */
  --radius-lg: 28px;
  --radius-md: 22px;
  --radius-sm: 14px;

  /* ---- MOTION ---- */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  /* ---- LAYOUT ---- */
  --container: 1280px;
}