/* ============================================================
   LANGENSTEIN REAL ESTATE - DESIGN TOKENS v2.0
   Canonical source of truth - 2026-07-14
   Palette and The Key Method blessed by Susan.
   Primary: Doylestown Sage. Secondary: Doylestown Navy.
   ============================================================ */
:root{
  /* Core palette */
  --lr-green:#3E5541;
  --lr-green-deep:#26362A;
  --lr-navy:#1E3446;
  --lr-gold:#C9A24D;
  --lr-ivory:#F6F0E6;
  --lr-sage:#72806A;
  --lr-clay:#A45B47;
  --lr-graphite:#3C3C3C;
  --lr-white:#FFFFFF;
  --lr-black:#171A17;

  /* Accessible color pairs */
  --lr-on-green:var(--lr-ivory);
  --lr-on-green-deep:var(--lr-ivory);
  --lr-on-navy:var(--lr-white);
  --lr-on-gold:var(--lr-green-deep);
  --lr-on-ivory:var(--lr-graphite);
  --lr-on-clay:var(--lr-white);

  /* Semantic roles */
  --lr-bg:var(--lr-ivory);
  --lr-surface:var(--lr-white);
  --lr-ink:var(--lr-graphite);
  --lr-heading:var(--lr-green);
  --lr-primary:var(--lr-green);
  --lr-primary-deep:var(--lr-green-deep);
  --lr-secondary:var(--lr-navy);
  --lr-accent:var(--lr-gold);
  --lr-lifestyle:var(--lr-sage);
  --lr-win:var(--lr-clay);
  --lr-focus:var(--lr-gold);
  --lr-danger:#8A3F31;
  --lr-verify:#7A5D18;

  /* Alpha tints */
  --lr-green-04:rgba(62,85,65,.04);
  --lr-green-08:rgba(62,85,65,.08);
  --lr-green-16:rgba(62,85,65,.16);
  --lr-green-90:rgba(38,54,42,.92);
  --lr-navy-08:rgba(30,52,70,.08);
  --lr-gold-12:rgba(201,162,77,.12);
  --lr-gold-16:rgba(201,162,77,.16);
  --lr-clay-12:rgba(164,91,71,.12);
  --lr-line:rgba(62,85,65,.18);
  --lr-line-strong:rgba(62,85,65,.34);

  /* Typography */
  --lr-font-head:"Lora","Georgia","Times New Roman",serif;
  --lr-font-body:"Inter","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --lr-font-mono:"Cascadia Mono","SFMono-Regular",Consolas,monospace;
  --lr-weight-regular:400;
  --lr-weight-medium:600;
  --lr-weight-bold:700;
  --lr-display:clamp(2.75rem,6vw,5.5rem);
  --lr-h1:clamp(2.25rem,4.5vw,4rem);
  --lr-h2:clamp(1.75rem,3vw,2.75rem);
  --lr-h3:1.375rem;
  --lr-body-lg:1.125rem;
  --lr-body:1rem;
  --lr-small:.8125rem;
  --lr-micro:.6875rem;
  --lr-lh-tight:1.08;
  --lr-lh-copy:1.55;
  --lr-track-tight:-.025em;
  --lr-track:.02em;
  --lr-track-wide:.16em;

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

  /* Shape and depth */
  --lr-radius-sm:6px;
  --lr-radius:12px;
  --lr-radius-lg:20px;
  --lr-radius-pill:999px;
  --lr-border:1px solid var(--lr-line);
  --lr-shadow-sm:0 1px 3px rgba(38,54,42,.10);
  --lr-shadow:0 1px 3px rgba(38,54,42,.10),0 16px 38px rgba(38,54,42,.08);
  --lr-shadow-hero:0 28px 70px rgba(38,54,42,.18);

  /* Layout */
  --lr-content:1180px;
  --lr-copy:720px;
  --lr-gutter:clamp(20px,4vw,56px);
  --lr-clearspace-mark:24px;

  /* Motion */
  --lr-ease:cubic-bezier(.2,.8,.2,1);
  --lr-fast:140ms;
  --lr-base:240ms;
}

/* Portable helper classes */
.lr-h{font-family:var(--lr-font-head);color:var(--lr-heading);line-height:var(--lr-lh-tight)}
.lr-body{font-family:var(--lr-font-body);color:var(--lr-ink);line-height:var(--lr-lh-copy)}
.lr-eyebrow{font:var(--lr-weight-bold) var(--lr-micro)/1 var(--lr-font-body);letter-spacing:var(--lr-track-wide);text-transform:uppercase;color:var(--lr-primary)}
.lr-cta{display:inline-flex;align-items:center;justify-content:center;gap:var(--lr-space-2);background:var(--lr-accent);color:var(--lr-on-gold);font:var(--lr-weight-bold) var(--lr-small)/1 var(--lr-font-body);border:0;border-radius:var(--lr-radius-pill);padding:14px 22px;letter-spacing:var(--lr-track);cursor:pointer;transition:transform var(--lr-fast) var(--lr-ease),box-shadow var(--lr-fast) var(--lr-ease)}
.lr-cta:hover{transform:translateY(-1px);box-shadow:var(--lr-shadow-sm)}
.lr-focus:focus-visible{outline:3px solid var(--lr-focus);outline-offset:3px}
.lr-verify{color:var(--lr-verify);background:var(--lr-gold-12);border:1px solid var(--lr-gold);border-radius:var(--lr-radius-sm);padding:var(--lr-space-2) var(--lr-space-3)}

/* Accessibility: gold is not body text on white/ivory; mid-sage is large text only on white. */