/* ============================================================
   Apex Cleaning Solutions — Foundations
   Burgundy + Gold + Ivory · Cormorant Garamond + Geist Sans
   ============================================================ */

/* Webfonts: Geist + Cormorant Garamond via Google Fonts CDN.
   (Geist is the codebase's primary; Cormorant Garamond is the
   declared serif. No webfont files were shipped — these are the
   nearest CDN equivalents.)  */
@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Geist:wght@300;400;500;600;700;800;900&family=Geist+Mono:wght@400;500;600&display=swap");

:root {
  /* ---------- BRAND PALETTE ---------- */
  --apex-burgundy:        #5B1619;  /* primary brand / headings */
  --apex-burgundy-accent: #80262A;  /* hover / accent burgundy   */
  --apex-gold:            #C8A15A;  /* secondary accent / rules  */
  --apex-charcoal:        #1F1D1D;  /* body text                 */
  --apex-ivory:           #F8F5EE;  /* primary page background   */
  --apex-mist:            #EAE7E2;  /* alt section background    */
  --apex-mint:            #DCEEE9;  /* soft chip background      */
  --apex-white:           #FFFFFF;

  /* ---------- SEMANTIC SURFACE & TEXT ---------- */
  --bg:           var(--apex-ivory);
  --bg-alt:       var(--apex-mist);
  --bg-card:      var(--apex-white);
  --bg-inverse:   var(--apex-burgundy);

  --fg:           var(--apex-charcoal);
  --fg-muted:     rgba(31, 29, 29, 0.72);
  --fg-subtle:    rgba(31, 29, 29, 0.55);
  --fg-on-dark:   var(--apex-white);

  --primary:           var(--apex-burgundy);
  --primary-hover:     var(--apex-burgundy-accent);
  --primary-fg:        var(--apex-white);
  --accent:            var(--apex-gold);
  --accent-soft:       rgba(200, 161, 90, 0.38);

  --border:        rgba(91, 22, 25, 0.10);
  --border-strong: rgba(91, 22, 25, 0.20);
  --border-gold:   rgba(200, 161, 90, 0.55);

  /* ---------- TYPE FAMILIES ---------- */
  --font-sans:    "Geist", "Lato", "Inter", Arial, sans-serif;
  --font-serif:   "Cormorant Garamond", "Playfair Display", "Libre Baskerville", Georgia, serif;
  --font-mono:    "Geist Mono", "Calibri", "Carlito", ui-monospace, monospace;

  /* ---------- TYPE SCALE ---------- */
  /* Display + headings use the serif. Body uses sans. */
  --fs-display:   clamp(2.6rem, 5.2vw + 1rem, 4.5rem); /* hero H1 */
  --fs-h1:        clamp(2.25rem, 3vw + 1rem, 3.5rem);
  --fs-h2:        clamp(1.75rem, 2vw + 0.75rem, 2.5rem);
  --fs-h3:        1.5rem;
  --fs-h4:        1.25rem;
  --fs-body-lg:   1.125rem;
  --fs-body:      1rem;
  --fs-body-sm:   0.875rem;
  --fs-caption:   0.75rem;
  --fs-eyebrow:   0.75rem;

  --lh-tight:     1.05;
  --lh-snug:      1.2;
  --lh-normal:    1.55;
  --lh-relaxed:   1.75;

  --tracking-display: 0.03em;   /* serif headings are slightly opened */
  --tracking-eyebrow: 0.34em;   /* eyebrow caps */
  --tracking-nav:     0.12em;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold: 600;
  --fw-bold:    700;
  --fw-black:   800;

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

  /* ---------- RADII ---------- */
  --radius-xs:  6px;
  --radius-sm:  12px;
  --radius-md:  16px;   /* default --radius from codebase */
  --radius-lg:  24px;
  --radius-xl:  32px;
  --radius-pill: 999px;

  /* ---------- SHADOWS (deepened 20% over codebase defaults) ---------- */
  --shadow-xs:   0 1px 2px rgba(31, 29, 29, 0.05);
  --shadow-sm:   0 4px 12px rgba(31, 29, 29, 0.08);
  --shadow-md:   0 8px 24px rgba(91, 22, 25, 0.12);
  --shadow-lg:   0 18px 44px rgba(91, 22, 25, 0.24);
  --shadow-xl:   0 28px 70px rgba(91, 22, 25, 0.28);
  --shadow-cta:  0 16px 36px rgba(91, 22, 25, 0.30);
  --shadow-card-hover: 0 24px 55px rgba(91, 22, 25, 0.18);

  /* ---------- MOTION ---------- */
  --ease-soft:   cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:    150ms;
  --dur-base:    250ms;
  --dur-slow:    700ms;
}

/* ============================================================
   SEMANTIC TYPE STYLES
   ============================================================ */

.t-display, h1.t-display {
  font-family: var(--font-serif);
  font-weight: var(--fw-regular);
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  color: var(--apex-burgundy);
}

h1, .t-h1 {
  font-family: var(--font-serif);
  font-weight: var(--fw-regular);
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  color: var(--apex-burgundy);
}

h2, .t-h2 {
  font-family: var(--font-serif);
  font-weight: var(--fw-regular);
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-display);
  color: var(--apex-burgundy);
}

h3, .t-h3 {
  font-family: var(--font-serif);
  font-weight: var(--fw-regular);
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-display);
  color: var(--apex-burgundy);
}

h4, .t-h4 {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  color: var(--apex-burgundy);
}

p, .t-body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--fg-muted);
}

.t-body-lg {
  font-size: var(--fs-body-lg);
  line-height: 1.8;
  color: var(--fg-muted);
}

.t-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--apex-burgundy-accent);
}

.t-label {
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--apex-charcoal);
}

.t-mono, code, kbd, samp {
  font-family: var(--font-mono);
  font-size: 0.85em;
}

/* Decorative gold rule used under headings — a recurring motif. */
.gold-rule {
  display: block;
  width: 80px;
  height: 1px;
  background: var(--apex-gold);
  margin-top: 16px;
}