/* =============================================================
   RSA — Roofing Sales Academy · Colors & Type
   "All sales. No fluff." — bold, confident, six-figure closer.
   ============================================================= */

/* Fonts: Fraunces (display, opsz + 700/900) · Inter (body, 400–900).
   @import is the first rule so it's resolved before any vars below. */
@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,700;9..144,900&family=Inter:wght@400;500;600;700;800;900&display=swap");

:root {
  /* ---------- BACKGROUND / SURFACE ---------- */
  /* Warm near-black — a hair warmer than navy. Pairs with Fraunces. */
  --bg-base:          #0f0c18;   /* warm near-black — primary canvas */
  --bg-elev:          #17131f;   /* one step up, used inside cards   */
  --bg-elev-2:        #110d1a;   /* card-on-card                     */
  --bg-section-warm:  #f6f1e8;   /* warm cream section bands         */

  /* ---------- INK / TEXT ---------- */
  --fg-1:        #ffffff;   /* hero / headline white                  */
  --fg-2:        #eaeff6;   /* body on dark — bright, never dim       */
  --fg-3:        #cbd5e1;   /* secondary on dark                      */
  --fg-on-cream: #0f0c18;   /* body on cream tile                     */
  --fg-mute:     #94a3b8;   /* meta / labels only — use sparingly     */

  /* ---------- BRAND ORANGE (primary accent) ---------- */
  --orange-50:   #fff4e6;
  --orange-200:  #ffd9a8;
  --orange-400:  #fbbf24;   /* highlight                              */
  --orange-500:  #f59e0b;   /* gradient start / kicker on dark        */
  --orange-600:  #f97316;   /* primary CTA / gradient end             */
  --orange-700:  #e8740c;   /* press / deep brand                     */
  --orange-800:  #c2410c;   /* badge backs                            */

  /* The signature gradient — "highlight word" in headlines + CTAs.  */
  --grad-orange: linear-gradient(135deg, #f59e0b 0%, #f97316 100%);

  /* ---------- SUPPORT / SEMANTIC ---------- */
  --green-500:   #22c55e;   /* checkmarks / guarantees                */
  --green-300:   #86efac;   /* guarantee text                         */
  --red-500:     #ef4444;   /* destructive                            */
  --red-300:     #f87171;   /* destructive text                       */
  --blue-roof:   #2d3f63;   /* logo navy — secondary brand            */

  /* ---------- CREAM TILE (signature card on light sections) ---------- */
  --cream-tile:        linear-gradient(145deg, #fdfcf9 0%, #f9f5ef 100%);
  --cream-tile-border: 2px solid #000000;
  --cream-tile-radius: 14px;

  /* ---------- BORDERS ---------- */
  --border-hairline:   rgba(255, 255, 255, 0.08);
  --border-card:       rgba(255, 255, 255, 0.10);
  --border-orange:     rgba(245, 158, 11, 0.40);
  --border-cream:      #000000;

  /* ---------- SHADOWS ---------- */
  --shadow-sm:   0 2px 6px  rgba(0, 0, 0, 0.30);
  --shadow-md:   0 10px 24px -8px rgba(0, 0, 0, 0.50);
  --shadow-lg:   0 28px 54px -12px rgba(0, 0, 0, 0.60);
  --shadow-cta:  0 6px 22px rgba(245, 158, 11, 0.35);
  --shadow-cream:0 6px 0 -2px #000000, 0 12px 24px -10px rgba(0,0,0,0.25);
  --inset-tile:  inset 0 1px 0 rgba(255, 255, 255, 0.08);

  /* ---------- RADII ---------- */
  --r-xs:  6px;
  --r-sm:  10px;
  --r-md:  12px;
  --r-lg:  14px;   /* canonical card radius */
  --r-xl:  20px;
  --r-pill:999px;

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

  /* ============================================================
     TYPOGRAPHY
     Headlines use Fraunces — a free Google variable serif. At weight
     900 with tight tracking and optical sizing turned on, it reads
     bold and confident on the warm near-black canvas, not editorial.
     Body is Inter — clean variable sans, weights 500–900. Both load
     from Google Fonts via @import below.
     ============================================================ */
  --font-display: "Fraunces", "Times New Roman", Georgia, "Liberation Serif", serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
                  Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Type scale — clamped for landing-page fluidity */
  --t-hero:    clamp(40px, 6vw, 64px);   /* H1 hero                 */
  --t-h1:      clamp(34px, 5vw, 52px);   /* section title           */
  --t-h2:      clamp(26px, 3.5vw, 38px);
  --t-h3:      22px;
  --t-h4:      18px;
  --t-body-lg: 18px;
  --t-body:    16px;
  --t-body-sm: 14.5px;
  --t-meta:    13px;
  --t-kicker:  12px;
}

/* ============================================================
   SEMANTIC TYPE — drop these classes anywhere; never re-derive.
   ============================================================ */

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-body);
  color: var(--fg-2);
  background: var(--bg-base);
  font-size: var(--t-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.rsa-hero, h1.rsa-hero {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 900;
  font-size: var(--t-hero);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--fg-1);
}

.rsa-h1, h1 {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 900;
  font-size: var(--t-h1);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--fg-1);
}

.rsa-h2, h2 {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 900;
  font-size: var(--t-h2);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--fg-1);
}

.rsa-h3, h3 {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 900;
  font-size: var(--t-h3);
  letter-spacing: -0.01em;
  color: var(--fg-1);
}

.rsa-h4, h4 {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: var(--t-h4);
  letter-spacing: -0.005em;
  color: var(--fg-1);
}

p, .rsa-body {
  font-family: var(--font-body);
  font-weight: 600;          /* never dim — punchy body */
  font-size: var(--t-body);
  line-height: 1.6;
  color: var(--fg-2);
  text-wrap: pretty;
}

.rsa-body-lg {
  font-size: var(--t-body-lg);
  font-weight: 500;
  line-height: 1.65;
  color: var(--fg-2);
}

.rsa-meta {
  font-size: var(--t-meta);
  font-weight: 700;
  color: var(--fg-mute);
}

/* The signature orange kicker — small, bold, UPPERCASE, spaced. */
.rsa-kicker {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--t-kicker);
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  background: var(--grad-orange);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Gradient highlight word inside a headline — wrap with <em>.    */
.rsa-h1 em, .rsa-h2 em, .rsa-hero em, h1 em, h2 em {
  font-style: normal;
  background: var(--grad-orange);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Hero tag — the giant ALL-CAPS gradient line beneath the H1.
   Uses Inter (body) at 900, not Fraunces — a tracked-out serif reads
   too editorial. The tag is a stamp, not a quote.                    */
.rsa-tag {
  font-family: var(--font-body);
  font-weight: 900;
  font-size: clamp(22px, 3vw, 32px);
  letter-spacing: 3px;
  text-transform: uppercase;
  line-height: 1.2;
  background: var(--grad-orange);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Mono — only for numbers / codes. */
code, kbd, samp, .rsa-mono {
  font-family: var(--font-mono);
  font-size: 0.95em;
}