/* ============================================================
   Cross Builders — Colors & Type
   ============================================================
   The Cross Builders system is grounded in three things:
   the brand red, an architectural black, and the warm reds
   of British brickwork. Type is bold, confident sans —
   it should feel like it's been carved into a steel beam.
   ============================================================ */

/* -- Fonts (Google Fonts substitutes — see README) ----------- */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800;900&family=Geist:wght@300;400;500;600;700&display=swap');

:root {
  /* ---- BRAND COLORS ---------------------------------------- */
  /* The Cross Builders red. Taken from the logo, slightly warmed
     so it reads well on web (the print red felt a touch hot). */
  --cb-red:            #E53124;
  --cb-red-deep:       #C12318;  /* hover / pressed */
  --cb-red-darker:     #9A1B12;  /* text on light bg, very small caps */

  /* The architectural black. Not pure #000 — that's harsh for
     long reading. We use a very dark warm graphite. */
  --cb-black:          #0F0F10;
  --cb-charcoal:       #1A1A1A;  /* logo black */
  --cb-graphite:       #2A2A2C;  /* nav, headings on white */

  /* Pure white — for clean canvases and reverse-out usage. */
  --cb-white:          #FFFFFF;

  /* ---- NEUTRALS (warm-leaning grey scale) ------------------ */
  /* Slightly warm greys to harmonise with brick. */
  --cb-stone-50:       #F7F5F2;  /* page bg, cards */
  --cb-stone-100:      #EFECE7;  /* section bg */
  --cb-stone-200:      #E2DDD5;  /* dividers, soft borders */
  --cb-stone-300:      #C7C0B5;  /* disabled, captions */
  --cb-stone-400:      #94897A;  /* secondary text on light */
  --cb-stone-500:      #5E5649;  /* dark captions */
  --cb-stone-700:      #3A3530;
  --cb-stone-900:      #1F1C19;

  /* ---- ACCENT COLORS (sampled from photographs) ------------ */
  /* Used sparingly — for atmosphere and texture references.
     These are NOT primary brand colors. */
  --cb-brick:          #A2462D;  /* sampled from finished red-brick */
  --cb-brick-dark:     #6E2E1F;
  --cb-sandstone:      #C8A57A;  /* indian sandstone paving */
  --cb-mortar:         #B8AC97;
  --cb-sky:            #4A6B82;  /* overcast sky / window reflections */

  /* ---- SEMANTIC COLORS ------------------------------------- */
  --bg:                var(--cb-stone-50);
  --bg-surface:        var(--cb-white);
  --bg-section:        var(--cb-stone-100);
  --bg-inverse:        var(--cb-black);

  --fg:                var(--cb-graphite);
  --fg-muted:          var(--cb-stone-400);
  --fg-strong:         var(--cb-black);
  --fg-inverse:        var(--cb-white);
  --fg-inverse-muted:  rgba(255,255,255,0.66);

  --accent:            var(--cb-red);
  --accent-hover:      var(--cb-red-deep);
  --accent-fg:         var(--cb-white);

  --border:            var(--cb-stone-200);
  --border-strong:     var(--cb-stone-300);
  --border-inverse:    rgba(255,255,255,0.14);

  --focus:             var(--cb-red);

  /* ---- TYPOGRAPHY ------------------------------------------ */
  /* Display / headlines: Archivo — geometric sans, near-match
     to the wordmark on the logo (which is set in a heavy
     condensed-ish geometric). Use 700–900 for impact.
     Body: Geist — modern, slightly technical neo-grotesque,
     reads cleanly at small sizes and pairs well with the
     bolder display. */
  --font-display:      'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-body:         'Geist', 'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:         'Geist Mono', 'JetBrains Mono', ui-monospace, monospace;

  /* Type scale — built for a builder's website with big,
     confident hero numbers and dense practical body copy. */
  --fs-xs:    12px;
  --fs-sm:    14px;
  --fs-base:  16px;
  --fs-md:    18px;
  --fs-lg:    20px;
  --fs-xl:    24px;
  --fs-2xl:   32px;
  --fs-3xl:   44px;
  --fs-4xl:   64px;   /* page hero */
  --fs-5xl:   96px;   /* big hero */
  --fs-6xl:   140px;  /* "Built in the Midlands since 1994" type moments */

  /* Line-heights */
  --lh-tight:   1.02;
  --lh-snug:    1.15;
  --lh-normal:  1.4;
  --lh-relaxed: 1.6;

  /* Letter spacing — display type uses tight tracking,
     small caps / labels use wide tracking */
  --ls-display:  -0.02em;
  --ls-tight:    -0.01em;
  --ls-normal:    0;
  --ls-label:     0.14em;
  --ls-eyebrow:   0.22em;

  /* ---- SPACING (4px 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;
  --s-24: 96px;
  --s-32: 128px;

  /* ---- RADIUS ---------------------------------------------- */
  /* The brand is built around square-on edges. We use almost
     no rounding — sharp corners feel structural, intentional,
     like brickwork. Reserved rounding for pills/inputs. */
  --r-none:  0;
  --r-sm:    2px;
  --r-md:    4px;
  --r-lg:    8px;
  --r-pill:  999px;

  /* ---- SHADOWS / ELEVATION --------------------------------- */
  /* Used sparingly. The brand prefers solid borders and
     bold blocks over floaty UI. */
  --shadow-sm:  0 1px 2px rgba(15,15,16,0.08);
  --shadow-md:  0 4px 16px rgba(15,15,16,0.10);
  --shadow-lg:  0 20px 48px rgba(15,15,16,0.16);
  --shadow-inset: inset 0 0 0 1px var(--border);

  /* ---- MOTION ---------------------------------------------- */
  /* Quiet, no bouncing. The brand is grounded. */
  --ease:      cubic-bezier(0.32, 0.72, 0.36, 1);
  --ease-out:  cubic-bezier(0.2, 0.8, 0.2, 1);
  --t-fast:    120ms;
  --t-base:    220ms;
  --t-slow:    420ms;

  /* ---- LAYOUT ---------------------------------------------- */
  --container:        1280px;
  --container-wide:   1440px;
  --gutter:           clamp(20px, 4vw, 48px);
}

/* ============================================================
   SEMANTIC TYPE STYLES
   These are the named styles to apply across the system.
   ============================================================ */

.cb-display-xl {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(56px, 9vw, var(--fs-6xl));
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  color: var(--fg-strong);
  text-wrap: balance;
}

.cb-display {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(40px, 6vw, var(--fs-4xl));
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  color: var(--fg-strong);
  text-wrap: balance;
}

.cb-h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-3xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  color: var(--fg-strong);
}

.cb-h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  color: var(--fg-strong);
}

.cb-h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  color: var(--fg-strong);
}

.cb-h4 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  color: var(--fg-strong);
}

/* Eyebrow / category label — always uppercase, wide tracking */
.cb-eyebrow {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-xs);
  line-height: 1;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
}

/* Quiet eyebrow for use on photographic backgrounds */
.cb-eyebrow--muted {
  color: var(--fg-muted);
}

.cb-body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--fg);
  text-wrap: pretty;
}

.cb-body-lg {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
  color: var(--fg);
  text-wrap: pretty;
}

.cb-lead {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-lg);
  line-height: var(--lh-normal);
  color: var(--fg);
  text-wrap: pretty;
}

.cb-caption {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--fg-muted);
}

/* Tabular data / stats */
.cb-stat-num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-4xl);
  line-height: 1;
  letter-spacing: var(--ls-tight);
  color: var(--fg-strong);
  font-variant-numeric: tabular-nums;
}

.cb-stat-label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--fg-muted);
}

/* Quote / pull-quote */
.cb-quote {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  color: var(--fg-strong);
  text-wrap: balance;
}

/* ============================================================
   Base resets — keep these minimal; consumers can opt in.
   ============================================================ */
.cb-reset, .cb-reset * {
  box-sizing: border-box;
}
.cb-reset body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}