/* ============================================================
   Greaves Construction — Colors & Type
   Source of truth for brand tokens.
   ============================================================ */

/* ---- Google Fonts (fallbacks for now) -----------------------
   Headlines use a heavy condensed sans that matches the
   "GREAVES CONSTRUCTION" wordmark (rounded, bold, slightly
   condensed, geometric). Closest free match: Barlow Condensed
   (800/900). Body uses Barlow (400/500/600) for family harmony.
   FLAGGED: brand wordmark font is unknown — confirm with client.
   ------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@600;700;800;900&family=Mulish:wght@400;500;600;700&family=Caveat:wght@600;700&display=swap');

:root {
  /* ---------- BRAND COLORS (exact samples from logo) -------- */
  --greaves-blue:    #185898;   /* Primary — "GREAVES", hammer */
  --greaves-blue-1:  #0F3E6E;   /* Deeper blue, hover/press */
  --greaves-blue-2:  #2A6FB3;   /* Lighter blue, secondary fills */
  --greaves-blue-3:  #E6EEF6;   /* Blue wash, surface tint */

  --greaves-green:   #88A828;   /* Secondary — "CONSTRUCTION", paintbrush, "Integrity" */
  --greaves-green-1: #6B8620;   /* Darker green, hover/press */
  --greaves-green-2: #A7C544;   /* Lighter green, highlights */
  --greaves-green-3: #EFF4DB;   /* Green wash, surface tint */

  --greaves-orange:  #F89848;   /* Accent — roofline, underline swoosh */
  --greaves-orange-1:#E07A22;   /* Darker orange, hover/press */
  --greaves-orange-2:#FFB67A;   /* Lighter orange */
  --greaves-orange-3:#FDEBD9;   /* Orange wash */

  /* ---------- NEUTRALS -------------------------------------- */
  --ink:       #0E1722;   /* Near-black, primary text */
  --ink-2:     #3B4654;   /* Secondary text */
  --ink-3:     #6B7684;   /* Tertiary / captions */
  --ink-4:     #A6AEB8;   /* Disabled / hairline labels */
  --line:      #E4E7EC;   /* Hairline borders */
  --line-2:    #F1F3F6;   /* Subtle dividers */
  --surface:   #FFFFFF;   /* Card / page */
  --surface-2: #F7F8FA;   /* App background */
  --surface-3: #EDEFF2;   /* Raised panel, chip bg */

  /* ---------- SEMANTIC -------------------------------------- */
  --fg:        var(--ink);
  --fg-muted:  var(--ink-2);
  --fg-soft:   var(--ink-3);
  --fg-on-brand: #FFFFFF;

  --bg:        var(--surface);
  --bg-app:    var(--surface-2);
  --bg-raised: var(--surface-3);

  --brand:            var(--greaves-blue);
  --brand-hover:      var(--greaves-blue-1);
  --brand-soft:       var(--greaves-blue-3);
  --brand-secondary:  var(--greaves-green);
  --brand-accent:     var(--greaves-orange);

  --success: var(--greaves-green);
  --warning: var(--greaves-orange);
  --danger:  #C0392B;
  --info:    var(--greaves-blue);

  /* ---------- TYPOGRAPHY ------------------------------------ */
  --font-display: 'Poppins', 'Montserrat', 'Helvetica Neue', 'Arial', system-ui, sans-serif;
  --font-body:    'Mulish', system-ui, -apple-system, Segoe UI, Helvetica, Arial, sans-serif;
  --font-hand:    'Caveat', 'Comic Sans MS', cursive; /* dad-joke sticky-notes */

  /* Type scale — mobile-first, generous sizing (55+ audience!) */
  --fs-xs:   15px;
  --fs-sm:   17px;
  --fs-base: 19px;    /* bumped for 55+ readability */
  --fs-md:   21px;
  --fs-lg:   25px;
  --fs-xl:   30px;
  --fs-2xl:  38px;
  --fs-3xl:  48px;
  --fs-4xl:  64px;
  --fs-5xl:  84px;

  --lh-tight:  1.1;
  --lh-snug:   1.3;
  --lh-normal: 1.6;
  --lh-loose:  1.8;

  --tracking-display: -0.005em;
  --tracking-caps:    0.04em;

  /* ---------- SPACING / LAYOUT ------------------------------ */
  --space-0: 0;
  --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 ----------------------------------------- */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;     /* default card */
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* ---------- SHADOWS --------------------------------------- */
  --shadow-1: 0 1px 2px rgba(14, 23, 34, 0.06), 0 1px 1px rgba(14, 23, 34, 0.04);
  --shadow-2: 0 4px 10px rgba(14, 23, 34, 0.08), 0 2px 4px rgba(14, 23, 34, 0.04);
  --shadow-3: 0 12px 28px rgba(14, 23, 34, 0.12), 0 4px 10px rgba(14, 23, 34, 0.06);
  --shadow-brand: 0 10px 24px rgba(24, 88, 152, 0.28);

  /* ---------- MOTION ---------------------------------------- */
  --ease-out: cubic-bezier(.2,.7,.2,1);
  --ease-in-out: cubic-bezier(.4,0,.2,1);
  --dur-fast: 120ms;
  --dur-med:  220ms;
  --dur-slow: 400ms;
}

/* ============================================================
   Base element styles — use as semantic defaults
   ============================================================ */

html { font-size: 100%; }
body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: var(--tracking-display);
  line-height: 1.08;
  color: var(--fg);
  margin: 0 0 var(--space-4);
  /* Sentence case is the default — more legible for 55+ readers.
     Use class .shout for deliberate UPPERCASE accents. */
}

h1.shout, h2.shout, h3.shout, h4.shout, .shout {
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
}

h1 { font-size: clamp(var(--fs-3xl), 6vw, var(--fs-5xl)); font-weight: 900; }
h2 { font-size: clamp(var(--fs-2xl), 4vw, var(--fs-4xl)); font-weight: 900; }
h3 { font-size: var(--fs-2xl); }
h4 { font-size: var(--fs-xl); }

.eyebrow {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-sm);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--brand);
}

p { margin: 0 0 var(--space-4); font-size: var(--fs-base); line-height: var(--lh-normal); color: var(--fg); }
p.lead { font-size: var(--fs-md); line-height: var(--lh-normal); color: var(--fg-muted); }
small, .caption { font-size: var(--fs-sm); color: var(--fg-soft); }

a { color: var(--brand); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--brand-hover); }

strong, b { font-weight: 700; color: var(--fg); }

/* handwritten callout — the "dad joke" sticky note */
.dad-joke {
  font-family: var(--font-hand);
  font-size: var(--fs-xl);
  color: var(--brand);
  transform: rotate(-2deg);
  display: inline-block;
}