/* ============================================================
   MJR Home Services — Colors & Type
   The HomeFax brand: a calm, confident "house x-ray" for homes.
   High contrast, surgical red, plain-spoken type.
   ============================================================ */

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

:root {
  /* -----------------------------------------------------------
     PALETTE — reuse exactly. The red is an accent, never a wash.
     ----------------------------------------------------------- */
  --mjr-red:        #D32F2F;   /* Primary accent — CTAs, mark, hairlines */
  --mjr-red-press:  #B71C1C;   /* Active/pressed */
  --mjr-red-tint:   rgba(211, 47, 47, 0.08); /* Faint surface tint */

  --mjr-black:      #0A0A0A;   /* Canvas — dark surfaces, header */
  --mjr-white:      #FFFFFF;   /* Structure */

  --mjr-gray-100:   #F5F5F5;   /* Light section surface */
  --mjr-gray-200:   #E6E6E6;   /* Hairline borders on light */
  --mjr-gray-400:   #9A9A9A;   /* Disabled, low-emphasis */
  --mjr-gray-600:   #4B4B4B;   /* Secondary text */
  --mjr-gray-800:   #1F1F1F;   /* Elevated dark surface */

  --mjr-green:      #1F9D55;   /* Success / "covered" — sparingly */

  /* Blueprint */
  --mjr-blueprint-line: rgba(255, 255, 255, 0.06); /* 1px grid on black */

  /* -----------------------------------------------------------
     SEMANTIC TOKENS — light mode (default)
     ----------------------------------------------------------- */
  --bg:             var(--mjr-white);
  --bg-muted:       var(--mjr-gray-100);
  --bg-inverse:     var(--mjr-black);

  --fg:             var(--mjr-black);
  --fg-muted:       var(--mjr-gray-600);
  --fg-inverse:     var(--mjr-white);
  --fg-accent:      var(--mjr-red);

  --border:         var(--mjr-gray-200);
  --border-strong:  var(--mjr-black);
  --rule-accent:    var(--mjr-red);

  /* -----------------------------------------------------------
     TYPE — Display: Outfit. Body: Inter. Tagline: caps Inter.
     ----------------------------------------------------------- */
  --font-display:   'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:      'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:      ui-monospace, 'JetBrains Mono', 'SF Mono', Menlo, monospace;

  /* Scale (16px base) */
  --fs-12: 0.75rem;
  --fs-13: 0.8125rem;
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-32: 2rem;
  --fs-40: 2.5rem;
  --fs-56: 3.5rem;
  --fs-72: 4.5rem;

  --lh-tight:   1.05;
  --lh-display: 1.1;
  --lh-snug:    1.25;
  --lh-body:    1.55;

  /* -----------------------------------------------------------
     SPACING — 4px base, generous on dark
     ----------------------------------------------------------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  /* -----------------------------------------------------------
     RADII — sharp corners, very subtle rounding only.
     ----------------------------------------------------------- */
  --r-0: 0px;
  --r-1: 2px;     /* hairline rounding */
  --r-2: 4px;     /* default for cards / inputs */
  --r-3: 8px;     /* maximum — never pillowy */
  --r-full: 999px; /* pills (used only for tag chips, never on primary surfaces) */

  /* -----------------------------------------------------------
     ELEVATION — flat by default. Shadows are soft, not glossy.
     ----------------------------------------------------------- */
  --shadow-0: none;
  --shadow-1: 0 1px 0 rgba(10, 10, 10, 0.06);
  --shadow-2: 0 1px 2px rgba(10, 10, 10, 0.06), 0 2px 8px rgba(10, 10, 10, 0.04);
  --shadow-3: 0 4px 16px rgba(10, 10, 10, 0.08), 0 1px 2px rgba(10, 10, 10, 0.06);
  --shadow-stamp: 0 0 0 1px var(--mjr-red), 0 8px 24px rgba(211, 47, 47, 0.18); /* "INSURED" shield */

  /* -----------------------------------------------------------
     MOTION — single easing, modest durations. No bounces.
     ----------------------------------------------------------- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-hover: 180ms;
  --dur-primary: 480ms;
  --dur-path: 700ms;
}

/* -----------------------------------------------------------
   SEMANTIC ELEMENT STYLES — minimal, opt-in via .mjr-prose
   Apply class to a wrapper to render typography defaults.
   ----------------------------------------------------------- */
.mjr-prose {
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-16);
  line-height: var(--lh-body);
  font-weight: 400;
}

.mjr-prose h1, .mjr-h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(var(--fs-40), 5vw, var(--fs-72));
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-5);
}

.mjr-prose h2, .mjr-h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(var(--fs-32), 3.5vw, var(--fs-56));
  line-height: var(--lh-display);
  letter-spacing: -0.015em;
  margin: 0 0 var(--space-4);
}

.mjr-prose h3, .mjr-h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-24);
  line-height: var(--lh-snug);
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-3);
}

.mjr-prose p, .mjr-p {
  font-family: var(--font-body);
  font-size: var(--fs-16);
  line-height: var(--lh-body);
  color: var(--fg);
  margin: 0 0 var(--space-4);
  text-wrap: pretty;
}

.mjr-lead {
  font-family: var(--font-body);
  font-size: var(--fs-20);
  line-height: 1.45;
  color: var(--fg-muted);
  font-weight: 400;
}

/* Caps tagline — the brand's signature stamps */
.mjr-tagline {
  font-family: var(--font-body);
  font-size: var(--fs-13);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-accent);
}

.mjr-eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-12);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

.mjr-mono {
  font-family: var(--font-mono);
  font-size: var(--fs-13);
}

/* The thin red rule — used as section divider */
.mjr-rule {
  border: 0;
  height: 2px;
  width: 48px;
  background: var(--mjr-red);
  margin: var(--space-5) 0;
}

/* Dark surface utility */
.mjr-on-dark {
  background: var(--mjr-black);
  color: var(--mjr-white);
}
.mjr-on-dark .mjr-prose,
.mjr-on-dark .mjr-p { color: var(--mjr-white); }
.mjr-on-dark .mjr-lead { color: rgba(255, 255, 255, 0.72); }