/* ================================================================
   PATHWAY CIVIL — COLORS & TYPE
   Single source of truth for the brand visual foundation.
   Off-white surfaces, charcoal text, black accents, restrained
   construction-yellow accent. No gradients, no decoration.
   ================================================================ */

/* ---------- TYPEFACES ----------
   Display + UI:  Neue Haas Grotesk / Inter Tight  (substituted)
   Mono / data:   JetBrains Mono                   (numerics, codes)
   Figures:       tabular-nums everywhere numbers stack
*/
@import url("https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap");

:root {
  /* ============ COLOR — RAW PALETTE ============ */
  /* Surfaces (off-white, never pure white) */
  --pc-bone:        #F4F2EC;   /* primary page background       */
  --pc-paper:       #FAF8F3;   /* elevated surface / card       */
  --pc-stone-100:   #ECE8DF;   /* hairline fills, dividers      */
  --pc-stone-200:   #DCD7CB;   /* subtle borders                */
  --pc-stone-300:   #B8B2A4;   /* disabled, captions on bone    */

  /* Inks */
  --pc-charcoal:    #1C1C1A;   /* primary text                  */
  --pc-graphite:    #3A3A37;   /* secondary text                */
  --pc-slate:       #6B6B65;   /* tertiary / metadata           */
  --pc-jet:         #0A0A09;   /* black accent / hero blocks    */

  /* Accent — construction marker, used sparingly */
  --pc-hi-vis:      #F2B411;   /* primary accent (hi-vis amber) */
  --pc-hi-vis-deep: #C8950A;   /* hover / pressed accent        */
  --pc-amber-tint:  #FBE9B5;   /* tonal background, very rare   */

  /* Semantic feedback (muted, industrial) */
  --pc-positive:    #2E6F4A;
  --pc-warning:     #B8761A;
  --pc-critical:    #8C2A1F;

  /* Focus ring */
  --pc-focus:       #1C1C1A;

  /* ============ COLOR — SEMANTIC TOKENS ============ */
  --bg:             var(--pc-bone);
  --bg-elevated:    var(--pc-paper);
  --bg-inverse:     var(--pc-jet);
  --bg-tonal:       var(--pc-stone-100);

  --fg:             var(--pc-charcoal);
  --fg-muted:       var(--pc-graphite);
  --fg-subtle:      var(--pc-slate);
  --fg-inverse:     var(--pc-bone);

  --line:           var(--pc-stone-200);
  --line-strong:    var(--pc-charcoal);
  --line-hairline:  rgba(28, 28, 26, 0.10);

  --accent:         var(--pc-hi-vis);
  --accent-fg:      var(--pc-jet);          /* text ON accent */
  --accent-hover:   var(--pc-hi-vis-deep);

  /* ============ TYPE — FAMILIES ============ */
  --font-display:   "Inter Tight", "Neue Haas Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-sans:      "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  --font-mono:      "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ============ TYPE — SCALE (modular, 1.25 desktop) ============ */
  --fs-overline:    11px;     /* uppercase eyebrow, tracked     */
  --fs-caption:     13px;
  --fs-body-sm:     15px;
  --fs-body:        17px;     /* default running text           */
  --fs-lead:        20px;     /* subheads / lead paragraph      */
  --fs-h6:          18px;
  --fs-h5:          22px;
  --fs-h4:          28px;
  --fs-h3:          40px;
  --fs-h2:          64px;
  --fs-h1:          96px;
  --fs-display:     160px;    /* hero numerals / numerals only  */

  /* ============ TYPE — WEIGHT ============ */
  --fw-regular:     400;
  --fw-medium:      500;
  --fw-semibold:    600;
  --fw-bold:        700;
  --fw-black:       800;

  /* ============ TYPE — LEADING ============ */
  --lh-tight:       0.96;
  --lh-snug:        1.08;
  --lh-display:     1.02;
  --lh-heading:     1.12;
  --lh-body:        1.55;
  --lh-loose:       1.75;

  /* ============ TYPE — TRACKING ============ */
  --tr-tightest:    -0.04em;   /* large display              */
  --tr-tight:       -0.02em;   /* H1–H3                      */
  --tr-snug:        -0.01em;   /* H4–H6                      */
  --tr-normal:      0em;
  --tr-wide:        0.04em;
  --tr-overline:    0.16em;    /* eyebrows / labels          */

  /* ============ SPACING (4pt baseline) ============ */
  --space-1:        4px;
  --space-2:        8px;
  --space-3:        12px;
  --space-4:        16px;
  --space-5:        24px;
  --space-6:        32px;
  --space-7:        48px;
  --space-8:        64px;
  --space-9:        96px;
  --space-10:       128px;
  --space-11:       192px;     /* section breathing          */

  /* ============ LAYOUT ============ */
  --container:      1320px;
  --gutter:         32px;
  --gutter-sm:      20px;
  --col-gap:        32px;
  --row-gap:        24px;

  /* ============ RADII (small only — civil is rectilinear) ============ */
  --r-0:            0px;
  --r-1:            2px;
  --r-2:            4px;
  --r-pill:         999px;     /* used on tags only          */

  /* ============ BORDERS ============ */
  --bw-hair:        1px;
  --bw-rule:        1px;
  --bw-strong:      2px;

  /* ============ ELEVATION (extremely restrained) ============ */
  --shadow-0:       none;
  --shadow-1:       0 1px 0 rgba(28,28,26,0.06);
  --shadow-2:       0 8px 24px -16px rgba(28,28,26,0.20);
  --shadow-card:    0 1px 0 rgba(28,28,26,0.06), 0 16px 32px -24px rgba(28,28,26,0.18);

  /* ============ MOTION ============ */
  --ease-standard:  cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out:       cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:        cubic-bezier(0.7, 0, 0.84, 0);
  --dur-fast:       140ms;
  --dur-base:       220ms;
  --dur-slow:       420ms;
  --dur-reveal:     720ms;     /* scroll reveal              */
}

/* ================================================================
   SEMANTIC TYPE CLASSES
   ================================================================ */

.pc-overline {
  font-family: var(--font-sans);
  font-size: var(--fs-overline);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tr-overline);
  text-transform: uppercase;
  color: var(--fg-subtle);
  line-height: 1;
}

.pc-display {
  font-family: var(--font-display);
  font-size: clamp(72px, 12vw, var(--fs-display));
  font-weight: var(--fw-black);
  line-height: var(--lh-display);
  letter-spacing: var(--tr-tightest);
  color: var(--fg);
}

.pc-h1 {
  font-family: var(--font-display);
  font-size: clamp(48px, 8vw, var(--fs-h1));
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  color: var(--fg);
}

.pc-h2 {
  font-family: var(--font-display);
  font-size: clamp(40px, 5.5vw, var(--fs-h2));
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  color: var(--fg);
}

.pc-h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-tight);
  color: var(--fg);
}

.pc-h4 {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-heading);
  letter-spacing: var(--tr-snug);
  color: var(--fg);
}

.pc-h5 {
  font-family: var(--font-sans);
  font-size: var(--fs-h5);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-heading);
  letter-spacing: var(--tr-snug);
  color: var(--fg);
}

.pc-h6 {
  font-family: var(--font-sans);
  font-size: var(--fs-h6);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-heading);
  letter-spacing: var(--tr-normal);
  color: var(--fg);
}

.pc-lead {
  font-family: var(--font-sans);
  font-size: var(--fs-lead);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  color: var(--fg-muted);
  text-wrap: pretty;
}

.pc-body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  color: var(--fg);
}

.pc-body-sm {
  font-family: var(--font-sans);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  color: var(--fg-muted);
}

.pc-caption {
  font-family: var(--font-sans);
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  line-height: 1.4;
  color: var(--fg-subtle);
}

.pc-mono {
  font-family: var(--font-mono);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-medium);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  color: var(--fg);
}

.pc-numeric {
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "ss01", "cv11";
}

/* ================================================================
   GLOBAL DEFAULTS
   ================================================================ */
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}
::selection { background: var(--pc-charcoal); color: var(--pc-bone); }
:focus-visible { outline: 2px solid var(--pc-focus); outline-offset: 3px; }
hr { border: none; border-top: 1px solid var(--line); margin: var(--space-8) 0; }