/* ==========================================================================
   Lettieri Renovations v2 :: Design tokens
   --------------------------------------------------------------------------
   ACSS-mappable by design. Every value here has a 1:1 target in the Automatic
   CSS dashboard so /forge-html-convert stays mechanical:

     --lr-primary            -> ACSS primary
     --lr-accent             -> ACSS secondary
     --lr-ink / --lr-cream   -> ACSS base / shade
     --lr-text-*             -> ACSS text colours
     --lr-space-*            -> ACSS space scale (xs .. 3xl)
     --lr-text-scale-*       -> ACSS text scale (xs .. 3xl)
     --lr-container / gutter -> ACSS container + gutter

   Palette is the client's real brand kit, not invented:
   _clients/lettieri-renovations/brand-kit/renders/brand-board.png
   ========================================================================== */

:root {
  /* ---- Brand colour (from the brand kit) ---- */
  --lr-crimson:        #C8102E;
  --lr-crimson-dark:   #A20D25;
  --lr-crimson-tint:   #F6E3E6;
  --lr-ink:            #141110;
  --lr-ink-soft:       #241F1D;
  --lr-ink-line:       #37302D;
  --lr-gold:           #B0813F;
  --lr-gold-light:     #C99A57;
  --lr-cream:          #F5F0E8;
  --lr-cream-deep:     #EBE3D7;
  --lr-silver:         #A39A92;
  --lr-white:          #FFFFFF;

  /* ---- Semantic roles ---- */
  --lr-primary:        var(--lr-crimson);
  --lr-primary-hover:  var(--lr-crimson-dark);
  --lr-accent:         var(--lr-gold);
  --lr-base:           var(--lr-white);
  --lr-base-alt:       var(--lr-cream);
  --lr-base-dark:      var(--lr-ink);

  --lr-text:           #1A1614;
  --lr-text-muted:     #6B625C;
  --lr-text-light:     rgba(255, 255, 255, 0.86);
  --lr-text-light-mut: rgba(255, 255, 255, 0.62);
  --lr-border:         #E2DACE;
  --lr-border-dark:    rgba(255, 255, 255, 0.16);

  /* ---- Type families ----
     Display: Newsreader. Editorial serif with moderate contrast and squared
     terminals, chosen to sit with the squared architectural LR monogram
     rather than fight it (a Didone would clash).
     UI/body: Inter Tight. Quiet grotesque. */
  --lr-font-display: "Newsreader", "Iowan Old Style", Georgia, serif;
  --lr-font-body:    "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  /* ---- Type scale (fluid) ---- */
  --lr-text-xs:   clamp(0.75rem, 0.73rem + 0.10vw, 0.8125rem);
  --lr-text-s:    clamp(0.875rem, 0.85rem + 0.12vw, 0.9375rem);
  --lr-text-m:    clamp(1rem, 0.97rem + 0.16vw, 1.0625rem);
  --lr-text-l:    clamp(1.125rem, 1.07rem + 0.28vw, 1.3125rem);
  --lr-text-xl:   clamp(1.375rem, 1.24rem + 0.66vw, 1.75rem);
  --lr-text-2xl:  clamp(1.75rem, 1.48rem + 1.35vw, 2.5rem);
  --lr-text-3xl:  clamp(2.25rem, 1.72rem + 2.63vw, 3.75rem);
  --lr-text-4xl:  clamp(2.75rem, 1.86rem + 4.45vw, 5.25rem);

  /* ---- Space scale ---- */
  --lr-space-3xs: 0.25rem;
  --lr-space-2xs: 0.5rem;
  --lr-space-xs:  0.75rem;
  --lr-space-s:   1rem;
  --lr-space-m:   1.5rem;
  --lr-space-l:   2rem;
  --lr-space-xl:  3rem;
  --lr-space-2xl: 4rem;
  --lr-space-3xl: 6rem;

  /* Section rhythm. Tightened on phones on purpose: the desktop value is far
     too much vertical air on a 375px screen. */
  --lr-section-y:  clamp(3.25rem, 2.1rem + 5.2vw, 6.5rem);

  /* ---- Layout ----
     ONE container, ONE gutter. Nothing else may define page-edge padding.
     This is the guardrail from the Ironwood alignment bugs. */
  --lr-container: 1240px;
  --lr-gutter:    clamp(1.25rem, 0.9rem + 1.6vw, 2.5rem);

  /* ---- Radii, shadows, motion ---- */
  --lr-radius-s:  4px;
  --lr-radius-m:  8px;
  --lr-radius-l:  16px;
  --lr-shadow-s:  0 1px 3px rgba(20, 17, 16, 0.10);
  --lr-shadow-m:  0 8px 24px rgba(20, 17, 16, 0.12);
  --lr-shadow-l:  0 22px 60px rgba(20, 17, 16, 0.22);
  --lr-ease:      cubic-bezier(0.22, 0.61, 0.36, 1);
  --lr-header-h:  84px;
}

@media (max-width: 900px) {
  :root { --lr-header-h: 68px; }
}