/* ============================================================
   ReplyFirst Design System — Colors & Type
   After-hours response & missed-call recovery for trades.
   "Answer first. Win more jobs."
   ------------------------------------------------------------
   Fonts are loaded from Google Fonts (Anton, Inter, JetBrains
   Mono). If you need offline/self-hosted files, drop them in
   fonts/ and swap the @import for @font-face. See README.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Anton&family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;700;800&display=swap');

:root {
  /* ---- Core neutrals (black is the dominant brand colour) ---- */
  --black:        #050505;
  --charcoal:     #111111;
  --dark-card:    #171717;
  --dark-panel:   #0C0C0C;
  --steel:        #2A2A2A;
  --hairline:     #333333;   /* default border on dark */
  --hairline-dim: #222222;   /* subtle dividers, header border */

  /* ---- Yellow / primary action (hazard tape, headlights) ---- */
  --yellow:       #FFD400;
  --yellow-hover: #EABB00;
  --yellow-dark:  #B99000;
  --yellow-soft:  #FFF3A3;

  /* ---- White / text ---- */
  --white:        #FFFFFF;
  --off-white:    #F4F1EA;
  --light-grey:   #D9D9D9;
  --muted-text:   #B8B8B8;
  --muted-deep:   #8A8A8A;   /* stat source lines */

  /* ---- Red / urgency (use sparingly) ---- */
  --red:          #FF3B1F;
  --red-dark:     #B82312;
  --red-soft:     #FFE0D8;

  /* ---- Green / success + routing ---- */
  --green:        #27C46A;
  --green-dark:   #168C48;
  --green-soft:   #DFF8E8;

  /* ============ Semantic surface tokens ============ */
  --bg:           var(--black);        /* dominant page bg */
  --bg-elevated:  var(--charcoal);     /* cards on dark */
  --bg-card:      var(--dark-card);
  --bg-light:     var(--off-white);    /* light sections */
  --surface-line: var(--hairline);

  /* ============ Semantic text tokens ============ */
  --fg1:          var(--white);        /* primary text on dark */
  --fg2:          var(--muted-text);   /* secondary text on dark */
  --fg3:          var(--muted-deep);   /* tertiary / sources */
  --fg-on-light:  var(--black);        /* text on off-white */
  --fg-on-light-2:#3A3A3A;             /* secondary on light */
  --accent:       var(--yellow);

  /* ============ Type families ============ */
  --font-display: 'Anton', 'Bebas Neue', 'Arial Narrow', sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', 'Roboto Mono', ui-monospace, monospace;

  /* ============ Radii ============ */
  --r-sm: 6px;
  --r-md: 8px;     /* buttons */
  --r-lg: 16px;    /* cards, panels */
  --r-pill: 999px; /* status badges */

  /* ============ Shadows / elevation ============ */
  --shadow-hard:    4px 4px 0 0 #000000;          /* primary button (dark) */
  --shadow-hard-sm: 2px 2px 0 0 #000000;          /* button :active */
  --shadow-hard-yellow: 4px 4px 0 0 var(--yellow);/* dark button on light bg */
  --shadow-card:    0 24px 80px rgba(0,0,0,0.45);  /* dispatch / floating cards */
  --shadow-glow-yellow: 0 0 0 1px var(--yellow);   /* most-popular pricing */

  /* ============ Spacing scale (4px base) ============ */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;

  /* ============ Operational label rhythm ============ */
  --label-tracking: 0.08em;
}

/* ============================================================
   Base element styles — opt-in via .rf-scope wrapper so this
   file never fights an app's own resets when imported.
   ============================================================ */
.rf-scope {
  background: var(--bg);
  color: var(--fg1);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ---- Display headings (Anton, uppercase, tight) ---- */
.rf-scope h1, .rf-h1,
.rf-scope h2, .rf-h2,
.rf-scope h3, .rf-h3 {
  font-family: var(--font-display);
  font-weight: 400;        /* Anton is single-weight, reads heavy */
  text-transform: uppercase;
  line-height: 0.92;
  letter-spacing: 0.005em;
  margin: 0;
  color: var(--fg1);
}
.rf-scope h1, .rf-h1 { font-size: clamp(48px, 7vw, 104px); }
.rf-scope h2, .rf-h2 { font-size: clamp(34px, 4.5vw, 64px); }
.rf-scope h3, .rf-h3 { font-size: clamp(22px, 2.6vw, 34px); }

/* Yellow emphasis span inside a headline */
.rf-accent { color: var(--yellow); }

/* ---- Body copy ---- */
.rf-scope p, .rf-p {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  color: var(--fg2);
  margin: 0;
  text-wrap: pretty;
}
.rf-lead {            /* hero subheadline */
  font-size: 20px;
  line-height: 1.5;
  color: var(--light-grey);
}

/* ---- Operational / mono labels ---- */
.rf-label, .rf-scope .label {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: var(--label-tracking);
  font-size: 12px;
  font-weight: 800;
  color: var(--fg2);
}

/* ---- Stat number (Anton, yellow) ---- */
.rf-stat {
  font-family: var(--font-display);
  font-size: clamp(40px, 5vw, 56px);
  line-height: 1;
  color: var(--yellow);
}

/* ---- Selection ---- */
.rf-scope ::selection { background: var(--yellow); color: var(--black); }