/* Lawrence County Land Bank — design tokens.
   Source of truth: Brad's design system (design-system/tokens/, 2026-08-02).
   This file inlines those tokens for the child theme, adds the fluid type
   scale the rebuild requires (the DS px scale is the reference; production
   headings must flex from 320px to 1440px), and keeps the legacy alias names
   the component CSS consumes so the swap is a token edit, not a rewrite.

   Deviations from the DS, each contrast-forced (site-rebuild/contrast-matrix.mjs):
   - --text-muted maps to gray-600, not gray-500 (gray-500 on white is 4.38:1,
     under the 4.5:1 AA floor for body-size text).
   - --border-input is gray-500: input boundaries need 3:1 (1.4.11); the DS
     gray-200/300 borders stay for decorative card edges only.
   - The Sold status dot uses gray-500, not gray-400 (gray-400 on gray-50 is
     2.36:1, under the 3:1 non-text floor). */

/* ============================ Fonts ============================
   Self-hosted per the DS's own production note (no Google round trip,
   no third-party connection, no GDPR question).
   Inter: one Latin-subset variable woff2 covers 100-900. Preloaded.
   IBM Plex Mono: parcel IDs, dollar figures, tabular data. */
@font-face{
  font-family:"Inter";
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url("../fonts/inter-latin-var.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"IBM Plex Mono";
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url("../fonts/ibm-plex-mono-latin-400.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"IBM Plex Mono";
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url("../fonts/ibm-plex-mono-latin-500.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"IBM Plex Mono";
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url("../fonts/ibm-plex-mono-latin-600.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
:root{
  --font-core:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --font-brand:var(--font-core);
  --font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  /* legacy names */
  --font-text:var(--font-core);
  --font-display:var(--font-core);
}

/* ============================ Base palette (DS tokens/colors.css) ============================
   --blue-600 #2a63b5 and --green-500 #339933 are the brand primaries. */
:root{
  --white:#ffffff;

  /* Land Bank Blue — trust, public service. */
  --blue-50:#eff4fb;
  --blue-100:#dbe6f6;
  --blue-200:#bcd0ec;
  --blue-300:#93b2df;
  --blue-400:#6390cd;
  --blue-500:#3f75c0;
  --blue-600:#2a63b5;  /* primary — 5.91:1 on white */
  --blue-700:#22508f;  /* hover — 8.04:1 */
  --blue-800:#1b3e6d;  /* press / deep panel — 10.73:1 */
  --blue-900:#152d4e;
  --blue-950:#0f1f36;

  /* Renewal Green — land returned to use, "for sale", growth.
     500 FAILS AA for body-size text on white (3.66:1): large text, icons and
     non-text UI only. 600 is the text-safe green (5.04:1). */
  --green-50:#f0f8f0;
  --green-100:#d9eed9;
  --green-200:#b3ddb3;
  --green-300:#82c682;
  --green-400:#52ad52;
  --green-500:#339933;
  --green-600:#2a7f2a;
  --green-700:#226622;
  --green-800:#1a4d1a;

  /* Neutrals */
  --gray-0:#ffffff;
  --gray-25:#f9f9fb;
  --gray-50:#f2f3f5;
  --gray-100:#e8e9ec;
  --gray-200:#dcdee2;
  --gray-300:#c3c6cc;
  --gray-400:#9ca0a8;  /* decoration only — 2.62:1 on white, never text */
  --gray-500:#75797f;  /* 4.38:1 — non-text UI and large text only */
  --gray-600:#5a5d62;  /* 6.61:1 — smallest safe muted text */
  --gray-700:#434549;  /* 9.61:1 — body text */
  --gray-800:#212326;  /* 15.75:1 — headings */
  --gray-900:#141617;

  /* Signal — pending / caution. Status only, never decoration. */
  --amber-50:#fdf6e8;
  --amber-100:#f8e8c4;
  --amber-500:#b8770f;
  --amber-700:#8a5809; /* 6.03:1 on white */

  /* Demolition red — condemned, removal, destructive actions. */
  --brick-50:#fbf0ee;
  --brick-100:#f3d9d3;
  --brick-500:#b4442f;
  --brick-700:#8a3223; /* 8.20:1 on white */

  /* Legacy palette aliases (consumed by components.css and page markup).
     Old #336699-keyed blue slots now resolve to the logo-blue ramp. */
  --lb-blue-50:var(--blue-50);
  --lb-blue-100:var(--blue-100);
  --lb-blue-200:var(--blue-200);
  --lb-blue-300:var(--blue-300);
  --lb-blue-400:var(--blue-400);
  --lb-blue-500:var(--blue-600);
  --lb-blue-600:var(--blue-700);
  --lb-blue-700:var(--blue-800);
  --lb-blue-800:var(--blue-900);
  --lb-blue-900:var(--blue-950);
  --lb-green-50:var(--green-50);
  --lb-green-100:var(--green-100);
  --lb-green-200:var(--green-200);
  --lb-green-300:var(--green-300);
  --lb-green-400:var(--green-400);
  --lb-green-500:var(--green-500);
  --lb-green-600:var(--green-600);
  --lb-green-700:var(--green-700);
  --lb-green-800:var(--green-800);
  --lb-green-900:var(--green-800);
  --ink-50:var(--gray-25);
  --ink-100:var(--gray-50);
  --ink-200:var(--gray-100);
  --ink-300:var(--gray-300);
  --ink-400:var(--gray-400);
  --ink-500:var(--gray-500);
  --ink-600:var(--gray-700);
  --ink-700:var(--gray-800);
  --ink-800:var(--gray-800);
  --ink-900:var(--gray-900);
  --red-50:var(--brick-50);
  --red-500:var(--brick-500);
  --red-700:var(--brick-700);
}

/* ============================ Semantic (DS tokens/semantic.css + theme layer) ============================ */
:root{
  /* Surfaces */
  --surface-page:var(--white);
  --surface-sunken:var(--gray-25);
  --surface-card:var(--white);
  --surface-muted:var(--gray-50);
  --surface-brand:var(--blue-600);
  --surface-brand-deep:var(--blue-900);
  --surface-brand-tint:var(--blue-50);
  --surface-renewal:var(--green-500);
  --surface-renewal-tint:var(--green-50);
  --surface-inverse:var(--blue-950);
  /* legacy names */
  --surface-subtle:var(--gray-25);
  --surface-inset:var(--gray-50);
  --surface-tint:var(--blue-50);
  --surface-dark:var(--blue-900);
  --surface-accent:var(--blue-600);
  --surface-accent-hover:var(--blue-700);
  --surface-accent-press:var(--blue-800);
  --surface-overlay:rgba(15,31,54,.58);

  /* Text */
  --text-heading:var(--gray-800);
  --text-body:var(--gray-700);
  --text-muted:var(--gray-600);   /* DS says gray-500; 4.38:1 fails AA — see header */
  --text-faint:var(--gray-500);   /* large text / non-text only */
  --text-on-brand:var(--white);
  --text-on-dark:var(--blue-100);
  --text-link:var(--blue-600);
  --text-link-hover:var(--blue-800);
  --text-eyebrow:var(--blue-600);
  /* legacy names */
  --text-inverse:var(--white);
  --text-inverse-muted:var(--gray-200);
  --text-accent:var(--blue-600);
  --text-on-accent:var(--white);

  /* Borders */
  --border-subtle:var(--gray-100);
  --border-default:var(--gray-200);
  --border-strong:var(--gray-800);
  --border-brand:var(--blue-600);
  --border-input:var(--gray-500);  /* 3:1 UI boundary (1.4.11) */
  --border-inverse:rgba(255,255,255,.24);
  --rule-accent:var(--green-500);

  /* Interactive */
  --action-primary:var(--blue-600);
  --action-primary-hover:var(--blue-700);
  --action-primary-active:var(--blue-800);
  --action-secondary:var(--green-500);
  --action-secondary-hover:var(--green-600);
  --action-quiet-hover:var(--blue-50);

  /* Focus (never removed, WCAG 2.4.7 + 2.4.11) */
  --focus-color:var(--blue-600);
  --focus-width:3px; /* @kind spacing */
  --focus-offset:2px; /* @kind spacing */
  --focus-ring:0 0 0 3px rgba(42,99,181,.35);
  --focus-ring-inverse:0 0 0 3px rgba(255,255,255,.7);

  /* Status — property lifecycle (the directory's locked vocabulary) */
  --status-forsale-fg:var(--green-600);
  --status-forsale-bg:var(--green-50);
  --status-forsale-border:var(--green-200);
  --status-forsale-dot:var(--green-500);
  --status-pending-fg:var(--amber-700);
  --status-pending-bg:var(--amber-50);
  --status-pending-border:var(--amber-100);
  --status-pending-dot:var(--amber-500);
  --status-sold-fg:var(--gray-600);
  --status-sold-bg:var(--gray-50);
  --status-sold-border:var(--gray-100);
  --status-sold-dot:var(--gray-500); /* DS gray-400 is 2.36:1 on gray-50 */
  --status-demo-fg:var(--brick-700);
  --status-demo-bg:var(--brick-50);
  --status-demo-border:var(--brick-100);
  --status-info-fg:var(--blue-700);
  --status-info-bg:var(--blue-50);
  --status-info-border:var(--blue-200);

  /* Status — messages (legacy names) */
  --status-success-fg:var(--green-700);
  --status-success-bg:var(--green-50);
  --status-success-dot:var(--green-500);
  --status-warning-fg:var(--amber-700);
  --status-warning-bg:var(--amber-50);
  --status-warning-dot:var(--amber-500);
  --status-danger-fg:var(--brick-700);
  --status-danger-bg:var(--brick-50);
  --status-danger-dot:var(--brick-500);
  --status-info-dot:var(--blue-600);

  /* Legibility scrims for text over photography (DS blue-950 tint) */
  --scrim-bottom:linear-gradient(to top,rgba(15,31,54,.86) 0%,rgba(15,31,54,.62) 38%,rgba(15,31,54,0) 100%); /* @kind other */
  --scrim-flat:rgba(15,31,54,.58);
  --gradient-image-scrim:linear-gradient(180deg,rgba(15,31,54,0) 25%,rgba(15,31,54,.82) 100%); /* @kind color */
  --gradient-hero-scrim:linear-gradient(90deg,rgba(15,31,54,.86) 0%,rgba(15,31,54,.45) 60%,rgba(15,31,54,.12) 100%); /* @kind color */
}

/* ============================ Type ============================
   The DS reference scale is a 1.200 minor third in px (tokens/typography.css).
   Headings here are fluid: the clamps land on DS scale steps at the 1440px
   end and stay readable at 320px (the fixed 64px production h1 was a defect
   the rebuild exists to fix). */
:root{
  /* DS reference steps */
  --text-2xs:11px;
  --text-xs:12px;
  --text-sm:14px;
  --text-base:16px;
  --text-md:18px;
  --text-lg:21px;
  --text-xl:25px;
  --text-2xl:30px;
  --text-3xl:36px;
  --text-4xl:44px;
  --text-5xl:54px;
  --text-6xl:66px;

  /* Fluid heading scale (320px → 1440px), endpoints on DS steps */
  --text-display:clamp(2.5rem,1.55rem + 4.75vw,4.125rem);  /* 40 → 66 (6xl) */
  --text-h1:clamp(2rem,1.45rem + 2.75vw,3.375rem);         /* 32 → 54 (5xl) */
  --text-h2:clamp(1.75rem,1.35rem + 2vw,2.75rem);          /* 28 → 44 (4xl) */
  --text-h3:clamp(1.375rem,1.2rem + .875vw,1.875rem);      /* 22 → 30 (2xl) */
  --text-h4:1.3125rem;  /* 21 (lg) */
  --text-h5:1.125rem;   /* 18 (md) */
  --text-h6:1rem;       /* 16 (base) */
  --text-lede:clamp(1.125rem,1.05rem + .35vw,1.3125rem);   /* 18 → 21 */
  /* Renamed from --text-eyebrow 2026-08-03: it collided with the semantic
     color token of the same name (line ~188) and silently broke eyebrow
     color, same failure mode as the fixed --text-body bug. */
  --text-eyebrow-size:var(--text-xs);

  /* Leading */
  --leading-tight:1.1;
  --leading-snug:1.25;
  --leading-normal:1.5;
  --leading-relaxed:1.65;
  /* legacy names */
  --leading-display:var(--leading-tight);
  --leading-heading:var(--leading-tight);
  --leading-lede:var(--leading-normal);
  --leading-body:var(--leading-relaxed);

  /* Weights */
  --weight-light:300;
  --weight-regular:400;
  --weight-medium:500;
  --weight-semibold:600;
  --weight-bold:700;
  --weight-black:800;

  /* Tracking */
  --tracking-tight:-0.02em;
  --tracking-normal:0;
  --tracking-wide:0.04em;
  --tracking-eyebrow:0.12em;
  /* legacy names */
  --tracking-display:var(--tracking-tight);
  --tracking-heading:var(--tracking-tight);
  --tracking-body:var(--tracking-normal);

  /* Measure */
  --measure-prose:66ch;
  --measure-lede:54ch;
}

/* ============================ Space and layout ============================
   DS 4px scale, expressed in rem so spacing tracks user font-size. */
:root{
  --space-0:0; --space-1:.25rem; --space-2:.5rem;  --space-3:.75rem;
  --space-4:1rem; --space-5:1.25rem; --space-6:1.5rem; --space-8:2rem;
  --space-10:2.5rem; --space-12:3rem; --space-16:4rem; --space-20:5rem;
  --space-24:6rem; --space-32:8rem;

  /* Rhythm */
  --section-y:6rem;
  --section-y-tight:4rem;
  --space-section:clamp(3.5rem,2.5rem + 5vw,6rem);
  --space-section-hero:clamp(4.5rem,3rem + 7vw,8rem);
  --space-card-gap:var(--space-6);
  --space-heading-to-body:var(--space-4);

  /* Layout (DS: 1180px container) */
  --container-max:1180px;
  --container-narrow:760px;
  /* Homepage content column (Brad's 2026-08-03 mock): tighter than the
     site container so hero text, sections, and cards share one edge. */
  --container-home:970px;
  --container-gutter:clamp(1rem,.5rem + 2.5vw,2rem);
  --gutter:var(--container-gutter);

  /* Minimum interactive target (WCAG 2.5.8 AA) */
  --target-min:44px; /* @kind spacing */
}

/* ============================ Radius ============================ */
:root{
  --radius-none:0;
  --radius-xs:2px;
  --radius-sm:3px;
  --radius-md:6px;    /* controls: buttons, inputs */
  --radius-lg:10px;   /* cards */
  --radius-xl:16px;   /* dialogs, media */
  --radius-pill:999px;
  --radius-circle:50%;

  --border-hairline:1px;
  --border-thick:2px;
  --border-rule:4px;
}

/* ============================ Elevation ============================
   Soft, blue-tinted, never black. Cards sit on the page. */
:root{
  --shadow-none:none;
  --shadow-xs:0 1px 2px rgba(21,45,78,.06);
  --shadow-sm:0 1px 3px rgba(21,45,78,.08),0 1px 2px rgba(21,45,78,.04);
  --shadow-md:0 4px 12px rgba(21,45,78,.10),0 1px 3px rgba(21,45,78,.05);
  --shadow-lg:0 12px 28px rgba(21,45,78,.13),0 2px 6px rgba(21,45,78,.06);
  --shadow-focus:0 0 0 3px rgba(42,99,181,.35);
  --shadow-accent:0 4px 14px rgba(42,99,181,.28);
  --shadow-header:0 1px 0 var(--gray-100);
}

/* ============================ Motion ============================
   Calm and short. Civic site, not a product launch. */
:root{
  --duration-instant:80ms; /* @kind other */
  --duration-fast:140ms; /* @kind other */
  --duration-base:220ms; /* @kind other */
  --duration-slow:380ms; /* @kind other */
  --ease-standard:cubic-bezier(.32,.72,0,1);
  --ease-out:cubic-bezier(0,0,.2,1);
  --ease-in-out:cubic-bezier(.4,0,.2,1);
  /* legacy names */
  --duration-control:var(--duration-fast);
  --duration-lift:var(--duration-base);
  --duration-reveal:var(--duration-slow);
  --transition-control:color var(--duration-fast) var(--ease-out),background-color var(--duration-fast) var(--ease-out),border-color var(--duration-fast) var(--ease-out),box-shadow var(--duration-fast) var(--ease-out);
  --transition-lift:transform var(--duration-base) var(--ease-standard),box-shadow var(--duration-base) var(--ease-standard);
}

/* WCAG 2.3.3 — honour the OS setting. Non-negotiable. */
@media (prefers-reduced-motion:reduce){
  :root{--duration-instant:1ms;--duration-fast:1ms;--duration-base:1ms;--duration-slow:1ms;}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important;}
}

/* ============================ Element defaults (DS tokens/base.css) ============================ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--font-core);
  font-size:var(--text-base);
  line-height:var(--leading-relaxed);
  font-optical-sizing:auto;
  color:var(--text-body);
  background:var(--surface-page);
  -webkit-font-smoothing:antialiased;
  text-wrap:pretty;
}
h1,h2,h3,h4,h5,h6{
  margin:0 0 var(--space-heading-to-body);
  font-family:var(--font-core);
  font-weight:var(--weight-bold);
  line-height:var(--leading-tight);
  letter-spacing:var(--tracking-tight);
  color:var(--text-heading);
  text-wrap:balance;
}
h1{font-size:var(--text-h1)} h2{font-size:var(--text-h2)} h3{font-size:var(--text-h3)}
h4{font-size:var(--text-h4)} h5{font-size:var(--text-h5)} h6{font-size:var(--text-h6)}
/* Reading measure retired site-wide (Brad 2026-08-04): paragraphs fill
   their container so text edges align with sibling cards/buttons.
   --measure-prose stays defined for opt-in use. */
p{margin:0 0 var(--space-4)}
a{color:var(--text-link);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px;transition:var(--transition-control)}
a:hover{color:var(--text-link-hover);text-decoration-thickness:2px}
strong,b{font-weight:var(--weight-bold);color:var(--text-heading)}
hr{border:0;border-top:var(--border-hairline) solid var(--border-subtle);margin:var(--space-8) 0}
img{max-width:100%;height:auto}
code,kbd,samp{font-family:var(--font-mono);font-size:.92em}

.lb-eyebrow{font-size:var(--text-xs);font-weight:var(--weight-bold);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--text-eyebrow)}

/* Focus is visible on every interactive element, always. */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:var(--focus-width) solid var(--focus-color);
  outline-offset:var(--focus-offset);
  border-radius:var(--radius-sm);
}