/* =============================================================
   CallFirst — Design Tokens
   Colors, typography, spacing, radii, elevation, motion.
   Import once at the top of any HTML page.

   Fonts (production build): Inter is self-hosted from /fonts/ (the
   "18pt" optical cut — the shipped brand weights). Fraunces is the
   variable opsz,wght axis pulled from Google Fonts. The CSS
   variables below are unchanged from the design-system export.
   ============================================================= */

/* ---- Fraunces (display + wordmark) — Google Fonts, variable opsz,wght ---- */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,500;9..144,600;9..144,700&display=swap');

/* ---- Inter (UI + body) — self-hosted "18pt" optical size ---- */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/Inter_18pt-Regular.ttf') format('truetype'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('fonts/Inter_18pt-Medium.ttf') format('truetype'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('fonts/Inter_18pt-SemiBold.ttf') format('truetype'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('fonts/Inter_18pt-Bold.ttf') format('truetype'); }

:root {
  /* ---------- Brand palette (locked) ---------- */
  --cf-ink:          #14261B;  /* body text — warm near-black, never pure black */
  --cf-ink-2:        #3D4A42;  /* secondary text, 70% ink vibe */
  --cf-ink-3:        #6B7870;  /* tertiary text, meta */
  --cf-logo:         #2B2B2B;  /* logo C — warm near-black (locked, NOT cf-ink) */

  --cf-cream:        #FDF9ED;  /* primary background — warm cream, never pure white */
  --cf-cream-2:      #F7F2E0;  /* surface / elevated card on cream */
  --cf-fog:          #E4DFD0;  /* cards, dividers (= border) */
  --cf-fog-2:        #D4CEBC;  /* stronger divider / pressed (= border-strong) */

  --cf-orange:       #F08A2C;  /* Primary CTA — signal orange */
  --cf-orange-press: #D9771C;  /* CTA pressed */
  --cf-orange-tint:  #FBE6CE;  /* orange as background tint */

  --cf-sage:         #5FA373;  /* secondary / accent — electric sage */
  --cf-sage-press:   #4D8A60;
  --cf-sage-soft:    #A8BE9F;  /* muted sage — LOGO DOT */
  --cf-sage-tint:    #D9E6D4;  /* sage as background tint (Schedule card) */

  /* Contact-tint palette — deterministic name → avatar tint (lib/contactTint.ts).
     Used for avatar pills, satellite circles in onboarding, etc. */
  --cf-tint-orange:  #F4B584;  --cf-tint-orange-ink: #D97847;
  --cf-tint-blue:    #C9D6F0;  --cf-tint-blue-ink:   #7A9AD4;
  --cf-tint-pink:    #F2C7D8;  --cf-tint-pink-ink:   #C67BA0;
  --cf-tint-sage:    #C8DFCA;  --cf-tint-sage-ink:   #5FA373;
  --cf-tint-honey:   #E8D9B5;  --cf-tint-honey-ink:  #B0893B;
  --cf-tint-violet:  #E3D1EA;  --cf-tint-violet-ink: #8E6BAC;

  /* ---------- Semantic ---------- */
  --cf-bg:           var(--cf-cream);
  --cf-surface:      var(--cf-cream-2);
  --cf-card:         #FFFFFF;  /* used sparingly; prefer cream-2 */
  --cf-border:       var(--cf-fog);
  --cf-border-strong:var(--cf-fog-2);
  --cf-divider:      rgba(20, 38, 27, 0.08);

  --cf-fg:           var(--cf-ink);
  --cf-fg-2:         var(--cf-ink-2);
  --cf-fg-3:         var(--cf-ink-3);
  --cf-on-orange:    var(--cf-cream);  /* cream, NEVER pure white — design-system rule (see lib/designTokens.ts; paywall hard-codes its own CF_CREAM at #F0EEE9, but the canonical token is cf-cream) */
  --cf-on-sage:      var(--cf-cream);

  /* No red. Use a warm amber for "attention", not danger. */
  --cf-warn:         #B8701E;
  --cf-success:      var(--cf-sage);

  /* ---------- Typography ---------- */
  --cf-font-ui:      'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --cf-font-display: 'Fraunces', 'Times New Roman', Georgia, serif;

  /* Fraunces optical-size axes — display reads as "grown-up editorial". */
  --cf-display-settings: "opsz" 72;
  --cf-body-settings:    "opsz" 14;

  /* Type scale */
  --cf-t-display-xl: 72px;   /* streak hero numeral */
  --cf-t-display-l:  56px;
  --cf-t-display-m:  40px;
  --cf-t-h1:         32px;
  --cf-t-h2:         24px;
  --cf-t-h3:         20px;
  --cf-t-body:       17px;
  --cf-t-body-s:     15px;
  --cf-t-caption:    13px;
  --cf-t-micro:      11px;

  /* Line heights */
  --cf-lh-tight:     1.05;
  --cf-lh-snug:      1.2;
  --cf-lh-body:      1.5;
  --cf-lh-relaxed:   1.65;

  /* Tracking — Fraunces display wants a whisker of negative */
  --cf-tr-display:  -0.02em;
  --cf-tr-ui:       -0.005em;
  --cf-tr-caps:      0.08em;

  /* ---------- Spacing (4px grid) ---------- */
  --cf-s-1:  4px;
  --cf-s-2:  8px;
  --cf-s-3:  12px;
  --cf-s-4:  16px;
  --cf-s-5:  20px;
  --cf-s-6:  24px;
  --cf-s-8:  32px;
  --cf-s-10: 40px;
  --cf-s-12: 48px;
  --cf-s-16: 64px;
  --cf-s-20: 80px;

  /* ---------- Radii ---------- */
  --cf-r-1:  6px;
  --cf-r-2:  12px;
  --cf-r-3:  18px;
  --cf-r-4:  24px;
  --cf-r-pill: 999px;

  /* ---------- Elevation — single soft diffuse system. No multi-layer shadows. ---------- */
  --cf-e-0: none;
  --cf-e-1: 0 1px 2px rgba(20, 38, 27, 0.04), 0 2px 8px rgba(20, 38, 27, 0.04);
  --cf-e-2: 0 2px 4px rgba(20, 38, 27, 0.05), 0 8px 24px rgba(20, 38, 27, 0.06);
  --cf-e-3: 0 4px 8px rgba(20, 38, 27, 0.06), 0 16px 40px rgba(20, 38, 27, 0.08);
  --cf-inner-hairline: inset 0 1px 0 rgba(255,255,255,0.6);

  /* ---------- Motion ---------- */
  --cf-ease:       cubic-bezier(0.22, 0.61, 0.36, 1);
  --cf-ease-soft:  cubic-bezier(0.4, 0.0, 0.2, 1);
  --cf-dur-1: 120ms;
  --cf-dur-2: 220ms;
  --cf-dur-3: 380ms;
  --cf-dur-4: 600ms;
}

/* =============================================================
   Base reset + body defaults
   ============================================================= */
html, body {
  background: var(--cf-bg);
  color: var(--cf-fg);
  font-family: var(--cf-font-ui);
  font-feature-settings: "ss01", "cv11";
  font-size: var(--cf-t-body);
  line-height: var(--cf-lh-body);
  letter-spacing: var(--cf-tr-ui);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  margin: 0;
}

/* =============================================================
   Semantic type — class-based so React / JSX can apply directly
   ============================================================= */
.cf-display-xl,
.cf-display-l,
.cf-display-m,
.cf-h1, .cf-h2 {
  font-family: var(--cf-font-display);
  font-feature-settings: "ss01";
  font-variation-settings: var(--cf-display-settings);
  letter-spacing: var(--cf-tr-display);
  line-height: var(--cf-lh-tight);
  color: var(--cf-fg);
  font-weight: 400;
  margin: 0;
  text-wrap: balance;
}
.cf-display-xl { font-size: var(--cf-t-display-xl); }
.cf-display-l  { font-size: var(--cf-t-display-l); }
.cf-display-m  { font-size: var(--cf-t-display-m); line-height: var(--cf-lh-snug); }
.cf-h1         { font-size: var(--cf-t-h1); line-height: var(--cf-lh-snug); font-weight: 500; }
.cf-h2         { font-size: var(--cf-t-h2); line-height: var(--cf-lh-snug); font-weight: 500; }

.cf-h3 {
  font-family: var(--cf-font-ui);
  font-size: var(--cf-t-h3);
  font-weight: 600;
  letter-spacing: var(--cf-tr-ui);
  line-height: var(--cf-lh-snug);
  color: var(--cf-fg);
  margin: 0;
}

.cf-body   { font-family: var(--cf-font-ui); font-size: var(--cf-t-body);   line-height: var(--cf-lh-body); color: var(--cf-fg); margin: 0; }
.cf-body-s { font-size: var(--cf-t-body-s); line-height: var(--cf-lh-body); }
.cf-caption{ font-size: var(--cf-t-caption); color: var(--cf-fg-3); line-height: var(--cf-lh-body); }
.cf-micro {
  font-size: var(--cf-t-micro);
  color: var(--cf-fg-3);
  letter-spacing: var(--cf-tr-caps);
  text-transform: uppercase;
  font-weight: 600;
}

/* Wordmark — "CallFirst". Single global brand (2026-05-14 lock). */
.cf-wordmark {
  font-family: var(--cf-font-display);
  font-variation-settings: "opsz" 72;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--cf-logo);
  line-height: 1;
}

/* =============================================================
   Tactile atoms — buttons, cards, inputs, chips
   ============================================================= */

.cf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--cf-s-2);
  font-family: var(--cf-font-ui);
  font-size: var(--cf-t-body);
  font-weight: 600;
  letter-spacing: var(--cf-tr-ui);
  height: 56px;
  padding: 0 var(--cf-s-6);
  border-radius: var(--cf-r-pill);
  border: none;
  cursor: pointer;
  transition: transform var(--cf-dur-2) var(--cf-ease),
              background-color var(--cf-dur-1) var(--cf-ease),
              box-shadow var(--cf-dur-2) var(--cf-ease);
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.cf-btn:active { transform: scale(0.98); }

.cf-btn--primary  { background: var(--cf-orange); color: var(--cf-on-orange); box-shadow: var(--cf-e-1); }
.cf-btn--primary:hover  { background: var(--cf-orange-press); }
.cf-btn--primary:active { background: var(--cf-orange-press); box-shadow: var(--cf-e-0); }

.cf-btn--secondary { background: var(--cf-sage); color: var(--cf-on-sage); }
.cf-btn--secondary:hover { background: var(--cf-sage-press); }

.cf-btn--ghost { background: transparent; color: var(--cf-fg); border: 1.5px solid var(--cf-border-strong); }
.cf-btn--ghost:hover { background: var(--cf-fog); }

.cf-btn--link {
  background: transparent; color: var(--cf-fg-2);
  height: auto; padding: var(--cf-s-2) var(--cf-s-3);
  font-weight: 500;
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-thickness: 1px; text-decoration-color: var(--cf-border-strong);
}
.cf-btn--link:hover { color: var(--cf-fg); text-decoration-color: var(--cf-fg); }

.cf-btn--lg { height: 64px; font-size: 18px; padding: 0 var(--cf-s-8); }
.cf-btn--sm { height: 40px; font-size: var(--cf-t-body-s); padding: 0 var(--cf-s-4); }

/* In-product CTA — the Home `Call X now` button (components/PrimaryCallCTA.tsx)
   and the Onboarding `Continue` / `Get started` button (ValueCarousel.tsx).
   Note: the Paywall Subscribe button is a true pill (height 52, radius 999) —
   use .cf-btn--primary for that, NOT this. */
.cf-btn--app {
  border-radius: 14px;
  padding: 18px 24px;     /* RN paddingVertical 18 · paddingHorizontal 24 */
  height: auto;
  font-weight: 700;
  font-size: 18px;
  color: var(--cf-on-orange);
}

/* Card */
.cf-card {
  background: var(--cf-cream-2);
  border: 1px solid var(--cf-border);
  border-radius: var(--cf-r-3);
  padding: var(--cf-s-5);
}
.cf-card--elevated { background: var(--cf-cream-2); border: 1px solid var(--cf-border); border-radius: var(--cf-r-3); padding: var(--cf-s-5); box-shadow: var(--cf-e-1); }
.cf-card--hero     { background: var(--cf-cream-2); border: 1px solid var(--cf-border); border-radius: var(--cf-r-4); padding: var(--cf-s-8); box-shadow: var(--cf-e-2); }

/* Sage card — the Schedule card on Home. Sage-tint w/ sage-soft border, 16pt radius. */
.cf-card--sage {
  background: var(--cf-sage-tint);
  border: 1px solid var(--cf-sage-soft);
  border-radius: 16px;
  padding: var(--cf-s-4);
}

/* Input */
.cf-input {
  width: 100%;
  background: var(--cf-cream);
  border: 1.5px solid var(--cf-border);
  border-radius: var(--cf-r-2);
  height: 52px;
  padding: 0 var(--cf-s-4);
  font-family: var(--cf-font-ui);
  font-size: var(--cf-t-body);
  color: var(--cf-fg);
  transition: border-color var(--cf-dur-1) var(--cf-ease);
  box-sizing: border-box;
}
.cf-input:focus { outline: none; border-color: var(--cf-sage); }
.cf-input::placeholder { color: var(--cf-fg-3); }

/* Chip */
.cf-chip {
  display: inline-flex; align-items: center; gap: var(--cf-s-2);
  padding: 6px var(--cf-s-3);
  border-radius: var(--cf-r-pill);
  background: var(--cf-fog); color: var(--cf-fg-2);
  font-size: var(--cf-t-caption); font-weight: 500;
  border: 1px solid transparent;
}
.cf-chip--on     { background: var(--cf-sage-tint); color: var(--cf-ink); border-color: var(--cf-sage-soft); }
.cf-chip--orange { background: var(--cf-orange-tint); color: #7A4212; border-color: #E8B98A; }

/* Divider */
.cf-divider { height: 1px; background: var(--cf-divider); border: 0; margin: var(--cf-s-4) 0; }

/* Dashed callout — used for empty / upsell / privacy callouts */
.cf-callout-dashed {
  border: 1.5px dashed var(--cf-border-strong);
  border-radius: 12px;
  padding: 12px 14px;
  color: var(--cf-fg-2);
  background: transparent;
}