/* ============================================================================
   James Yarger Construction, Inc. — prospect design tokens
   Archetype F — Boxed spec-sheet grid (blueprint title-block / datasheet)
   Direction: 20+yr multi-division licensed GC → reads as a datasheet, not a gallery.
   Palette: graphite-navy ink · warm drafting paper · clay-rust structure · evergreen site
   Type: Space Grotesk (self-hosted display) · system mono labels · system sans body
   Single canonical LIGHT theme (drafting paper). Fixed-ink bands use theme-independent
   *-on-ink tokens so accents never fail contrast (per the craft traps).
   ============================================================================ */

/* --- Self-hosted display face (subset, preloaded → font-display: optional) --- */
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 500;
  font-display: optional;
  src: url("assets/space-grotesk-500.woff2") format("woff2");
}
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 600;
  font-display: optional;
  src: url("assets/space-grotesk-600.woff2") format("woff2");
}
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 700;
  font-display: optional;
  src: url("assets/space-grotesk-700.woff2") format("woff2");
}

:root {
  /* ---- Color: paper + ink ---- */
  --color-paper:        #f4f1ea;  /* warm drafting paper — page ground */
  --color-paper-2:      #ece7dc;  /* alt panel / recessed cell */
  --color-paper-3:      #e3ddcf;  /* deeper recess / table zebra */
  --color-ink:          #171c26;  /* graphite-navy — primary ink, fixed dark bands */
  --color-ink-2:        #212936;  /* panel ink (slightly lifted) */
  --color-body:         #23282f;  /* body text on paper (AA+ on paper) */
  --color-muted:        #575349;  /* muted text on paper (AA on paper ≈ 6.3:1) */

  /* ---- Rules / borders (the datasheet grid) ---- */
  --color-line:         #cdc5b4;  /* hairline rule on paper */
  --color-line-strong:  #a79d89;  /* stronger interior rule */
  --color-cell-border:  #171c26;  /* the crisp datasheet cell border = ink */

  /* ---- Structural accent (clay-rust: brick / foundation) ---- */
  --color-clay:         #a94a29;  /* structural accent on paper (AA on paper ≈ 4.8:1) */
  --color-clay-deep:    #83381f;  /* darker clay for text/links needing AAA-ish */
  --color-clay-wash:    #f0ddd1;  /* clay tint fill behind small marks */

  /* ---- Secondary (evergreen: site & landscape division) ---- */
  --color-green:        #2f4a35;  /* evergreen on paper (AA ≈ 7:1) */
  --color-green-soft:   #3f6149;
  --color-green-wash:   #dfe7dd;

  /* ---- Theme-independent ON-INK tokens (for fixed graphite-navy bands) ---- */
  --color-on-ink:        #f4f1ea;  /* paper text on ink */
  --color-on-ink-muted:  #b7b0a1;  /* muted text on ink (≈ 8:1 on --color-ink) */
  --color-clay-on-ink:   #e18a5f;  /* BRIGHTER clay pinned for ink bands (≈ 6.9:1) */
  --color-green-on-ink:  #8fc79b;  /* brighter green pinned for ink bands (≈ 8.5:1) */
  --color-hairline-on-ink: #3b434f; /* hairline rule on ink bands */
  --color-line-on-ink:        rgba(244, 241, 234, 0.28); /* cell border on ink */
  --color-line-on-ink-strong: rgba(244, 241, 234, 0.40); /* stronger border on ink (ghost btn) */
  --scrim-fade:               rgba(0, 0, 0, 0.35);        /* decorative blueprint-grid fade */

  /* ---- Fixed dark scrim (caption/overlay) — never theme-variable ---- */
  --scrim-ink:          rgba(18, 20, 27, 0.78);

  /* ---- Radii: crisp datasheet corners ---- */
  --radius-none: 0px;
  --radius-sm:   2px;
  --radius-md:   4px;
  --radius-pill: 999px;

  /* ---- Spacing scale ---- */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-7:  2.5rem;
  --space-8:  3rem;
  --space-10: 4rem;
  --space-12: 5rem;
  --space-16: 7rem;

  /* ---- Type families ---- */
  --font-display: "Space Grotesk", "SF Pro Display", "Segoe UI", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "SFMono-Regular", "Cascadia Mono", Menlo, Consolas, monospace;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* ---- Type scale (fluid where useful) ---- */
  --fs-mono-label: 0.72rem;   /* spec labels — uppercase, tracked */
  --fs-xs:   0.8rem;
  --fs-sm:   0.9rem;
  --fs-base: 1rem;
  --fs-md:   1.125rem;
  --fs-lg:   1.35rem;
  --fs-xl:   1.75rem;
  --fs-2xl:  2.25rem;
  --fs-3xl:  clamp(2.6rem, 5.5vw, 4rem);
  --fs-hero: clamp(3rem, 8vw, 6.5rem);   /* title-block headline */

  --lh-tight: 1.02;
  --lh-snug:  1.18;
  --lh-body:  1.62;

  --tracking-label: 0.18em;   /* mono spec labels */
  --tracking-tight: -0.02em;  /* display headings */

  /* ---- Layout ---- */
  --max-content: 1200px;
  --max-narrow:  920px;
  --gutter: clamp(1.1rem, 4vw, 2.75rem);

  /* ---- Borders (composed) ---- */
  --border-hair:   1px solid var(--color-line);
  --border-strong: 1px solid var(--color-line-strong);
  --border-cell:   1.5px solid var(--color-cell-border);
  --border-cell-on-ink: 1.5px solid var(--color-line-on-ink);

  /* ---- Elevation (spec-sheet is flat; one subtle lift for the estimate card) ---- */
  --shadow-cell: 0 1px 0 rgba(23, 28, 38, 0.06);
  --shadow-lift: 0 10px 30px -18px rgba(23, 28, 38, 0.45);

  /* ---- Motion ---- */
  --dur-fast: 140ms;
  --dur-mid:  320ms;
  --dur-slow: 900ms;
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-draft: cubic-bezier(0.65, 0, 0.35, 1);
}