/* tokens.css — the single source of truth for Ring Ring Please design tokens.
   Loaded FIRST on every surface (ring page, dashboard, onboarding, landing,
   legal) so a site-wide look change — background, brand color, the main font —
   is a one-line edit here. Defines ONLY @font-face + :root custom properties:
   it never sets element styles, so linking it cannot override a page's own CSS.

   Font is SELF-HOSTED (public/fonts/nunito-*.woff2) — no third-party
   Google-Fonts request. Swap the typeface by changing these @font-face srcs +
   --rrp-font. Consolidated from the former per-stylesheet :root blocks in
   ring.css / home.css / style.css (2026-07-11). */

@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/nunito-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/nunito-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/nunito-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/fonts/nunito-800.woff2') format('woff2');
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('/fonts/nunito-900.woff2') format('woff2');
}

:root {
  /* Brand color */
  --rrp-red: #e8323c;
  --rrp-red-dark: #c42a33;
  --rrp-red-tint: #fdecee;
  --rrp-ink: #383c42;
  --rrp-ink-soft: #5b6168;
  --rrp-muted: #8a9099;
  --rrp-rule: #ececf0;
  --rrp-warm-rule: #ece7dc; /* warm greige hairline — visitor §9 "Call" pills, ring-card warm borders */
  --rrp-bg: #f5f6f8;
  --rrp-surface: #ffffff;
  --rrp-green: #2f8a5b; /* reply success / "Active" — the ONLY place green appears (§9) */
  --rrp-blush: #f7d3d6; /* soft-red progress track behind the ring button */
  --rrp-hairline: #2c2f34; /* charcoal hairline border (ring button inner ring) */

  /* Type — swap the whole site's font by changing this + the @font-face srcs */
  --rrp-font:
    'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica,
    Arial, sans-serif;

  /* Shape / elevation */
  --rrp-radius: 22px;
  --rrp-shadow:
    0 12px 34px rgba(56, 60, 66, 0.1), 0 2px 6px rgba(56, 60, 66, 0.06);
}