/* ============================================================================
   FLOOR SHIELD — Colors & Type
   Industrial / neo-brutalist coating brand. Black + Red + White only.
   Display + body type: Quatro Slab (provided locally in /fonts).
   ============================================================================ */

/* --- Fonts ----------------------------------------------------------------
   Two-family system, both wired locally:
   - Always Montefiore Bold  → DISPLAY (the brand's poster face)
   - Urbane                  → BODY + UI (geometric sans, full weight range)
   Quatro Slab is also wired as an alternate slab accent if it ever comes back. */

/* === DISPLAY · Always Montefiore Bold (single weight delivered) ============ */
@font-face {
  font-family: "Always Montefiore";
  src: url("fonts/AlwaysMontefioreBold-Regular.ttf") format("truetype");
  font-weight: 700; font-style: normal; font-display: swap;
}

/* === BODY + UI · Urbane (full range) ===================================== */
@font-face {
  font-family: "Urbane";
  src: url("fonts/Urbane-Thin.woff2") format("woff2"),
       url("fonts/Urbane-Thin.woff")  format("woff"),
       url("fonts/Urbane-Thin.ttf")   format("truetype");
  font-weight: 100; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Urbane";
  src: url("fonts/Urbane-ThinItalic.woff2") format("woff2"),
       url("fonts/Urbane-ThinItalic.woff")  format("woff"),
       url("fonts/Urbane-ThinItalic.ttf")   format("truetype");
  font-weight: 100; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Urbane";
  src: url("fonts/Urbane-ExtraLight.woff2") format("woff2"),
       url("fonts/Urbane-ExtraLight.woff")  format("woff"),
       url("fonts/Urbane-ExtraLight.ttf")   format("truetype");
  font-weight: 200; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Urbane";
  src: url("fonts/Urbane-ExtraLightItalic.woff2") format("woff2"),
       url("fonts/Urbane-ExtraLightItalic.woff")  format("woff"),
       url("fonts/Urbane-ExtraLightItalic.ttf")   format("truetype");
  font-weight: 200; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Urbane";
  src: url("fonts/Urbane-Light.woff2") format("woff2"),
       url("fonts/Urbane-Light.woff")  format("woff"),
       url("fonts/Urbane-Light.ttf")   format("truetype");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Urbane";
  src: url("fonts/Urbane-LightItalic.woff2") format("woff2"),
       url("fonts/Urbane-LightItalic.woff")  format("woff"),
       url("fonts/Urbane-LightItalic.ttf")   format("truetype");
  font-weight: 300; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Urbane";
  src: url("fonts/Urbane-Medium.woff2") format("woff2"),
       url("fonts/Urbane-Medium.woff")  format("woff"),
       url("fonts/Urbane-Medium.ttf")   format("truetype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Urbane";
  src: url("fonts/Urbane-MediumItalic.woff2") format("woff2"),
       url("fonts/Urbane-MediumItalic.woff")  format("woff"),
       url("fonts/Urbane-MediumItalic.ttf")   format("truetype");
  font-weight: 500; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Urbane";
  src: url("fonts/Urbane-DemiBold.woff2") format("woff2"),
       url("fonts/Urbane-DemiBold.woff")  format("woff"),
       url("fonts/Urbane-DemiBold.ttf")   format("truetype");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Urbane";
  src: url("fonts/Urbane-DemiBoldItalic.woff2") format("woff2"),
       url("fonts/Urbane-DemiBoldItalic.woff")  format("woff"),
       url("fonts/Urbane-DemiBoldItalic.ttf")   format("truetype");
  font-weight: 600; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Urbane";
  src: url("fonts/Urbane-Bold.woff2") format("woff2"),
       url("fonts/Urbane-Bold.woff")  format("woff"),
       url("fonts/Urbane-Bold.ttf")   format("truetype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Urbane";
  src: url("fonts/Urbane-BoldItalic.woff2") format("woff2"),
       url("fonts/Urbane-BoldItalic.woff")  format("woff"),
       url("fonts/Urbane-BoldItalic.ttf")   format("truetype");
  font-weight: 700; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Urbane";
  src: url("fonts/Urbane-Heavy.woff2") format("woff2"),
       url("fonts/Urbane-Heavy.woff")  format("woff"),
       url("fonts/Urbane-Heavy.ttf")   format("truetype");
  font-weight: 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Urbane";
  src: url("fonts/Urbane-HeavyItalic.woff2") format("woff2"),
       url("fonts/Urbane-HeavyItalic.woff")  format("woff"),
       url("fonts/Urbane-HeavyItalic.ttf")   format("truetype");
  font-weight: 900; font-style: italic; font-display: swap;
}

/* === ALTERNATE · Quatro Slab (kept available; not part of default system) = */
@font-face {
  font-family: "Quatro Slab";
  src: url("fonts/QuatroSlab-Regular.woff2") format("woff2"),
       url("fonts/QuatroSlab-Regular.woff")  format("woff"),
       url("fonts/QuatroSlab-Regular.ttf")   format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Quatro Slab";
  src: url("fonts/QuatroSlab-Bold.woff2") format("woff2"),
       url("fonts/QuatroSlab-Bold.woff")  format("woff"),
       url("fonts/QuatroSlab-Bold.ttf")   format("truetype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Quatro Slab";
  src: url("fonts/QuatroSlab-UltraBlack.woff2") format("woff2"),
       url("fonts/QuatroSlab-UltraBlack.woff")  format("woff"),
       url("fonts/QuatroSlab-UltraBlack.ttf")   format("truetype");
  font-weight: 900; font-style: normal; font-display: swap;
}

:root {
  /* === COLOR — Core palette (only three) ================================ */
  --fs-red:        #EE0013;   /* Floor Shield Red — primary action / accent  */
  --fs-red-press:  #C20010;   /* hover/press only — never as a fill          */
  --fs-black:      #0A0A0A;   /* near-black — borders, body, dark sections   */
  --fs-true-black: #000000;   /* hard shadows only                           */
  --fs-white:      #FFFFFF;   /* surfaces, on-dark text                      */
  --fs-paper:      #F4F2EE;   /* warm off-white — section breaks (optional)  */

  /* === COLOR — Semantic tokens ========================================== */
  --fg-1:        var(--fs-black);    /* primary text                         */
  --fg-2:        #3A3A3A;            /* secondary text                       */
  --fg-3:        #6B6B6B;            /* tertiary / meta                      */
  --fg-on-red:   var(--fs-white);
  --fg-on-dark:  var(--fs-white);
  --fg-on-dark-2:#BFBFBF;

  --bg-1:        var(--fs-white);
  --bg-2:        var(--fs-paper);
  --bg-dark:     var(--fs-black);
  --bg-red:      var(--fs-red);

  --border:      var(--fs-black);    /* always 2px solid black, never gray   */
  --shadow-ink:  var(--fs-true-black);

  /* === BORDER — uniform 2px black is the brand ========================== */
  --border-w-1:  2px;
  --border-w-2:  4px;                /* heavy frames, badges                 */
  --radius-0:    0px;                /* DEFAULT — no rounding anywhere       */
  --radius-1:    0px;                /* (kept for future / forms only)       */

  /* === SHADOW — Hard offset (no blur, no softening) ===================== */
  --shadow-sm:   2px 2px 0 0 var(--shadow-ink);
  --shadow-md:   4px 4px 0 0 var(--shadow-ink);
  --shadow-lg:   6px 6px 0 0 var(--shadow-ink);
  --shadow-xl:   8px 8px 0 0 var(--shadow-ink);
  --shadow-red:  4px 4px 0 0 var(--fs-red);

  /* === SPACING — 4px grid =============================================== */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;
  --s-10: 128px;

  /* === TYPE — Families ==================================================
     Two-family system:
       Display = Always Montefiore Bold  (poster headlines only)
       Body/UI = Urbane                  (everything else: copy, labels, nums)
     The display face has a single weight (700). Differentiate by SIZE alone
     on display; use Urbane's full weight range for hierarchy in body / UI. */
  --font-display: "Always Montefiore", "Antonio", "Anton", Impact, sans-serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-num:     "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-slab:    "Quatro Slab", Georgia, serif;     /* available, not default */

  /* === TYPE — Display scale (poster headlines) ==========================
     Always Montefiore Bold is the only display face. It's a heavy condensed
     industrial — tight tracking + low leading reinforce the poster feel.    */
  --display-tracking: -0.03em;
  --display-leading:  0.9;

  --display-hero:  clamp(64px, 8vw, 140px);   /* hero — "WE COAT FLOORS"     */
  --display-1:     64px;                       /* section opener              */
  --display-2:     48px;                       /* card head — "WE INSPECT..." */
  --display-3:     36px;                       /* sub-headline                */
  --display-4:     28px;                       /* step row title              */

  /* === TYPE — UI scale ================================================== */
  --ui-eyebrow:    13px;   /* ALL CAPS, tracked +0.08em — section labels      */
  --ui-btn:        15px;   /* button label                                    */
  --ui-btn-lg:     20px;   /* large button / marquee item                     */
  --ui-num:        28px;   /* step number / numeric callout                   */

  /* === TYPE — Body scale ================================================ */
  --body-lg:       19px;
  --body-md:       16px;   /* default                                         */
  --body-sm:       14px;
  --body-xs:       12px;

  /* === MOTION — fast, no-nonsense ======================================= */
  --ease-out:      cubic-bezier(.2, .8, .2, 1);
  --ease-snap:     cubic-bezier(.34, 1.56, .64, 1);
  --dur-1:         120ms;
  --dur-2:         200ms;
  --dur-3:         320ms;
}

/* ============================================================================
   Base + semantic element styles
   ============================================================================ */

html, body {
  background: var(--bg-1);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--body-md);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Display headings — Always Montefiore Bold (single weight 700). Tight, lower-
   case by default. UI keeps ALL-CAPS for short labels in Urbane.            */
.fs-display,
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;             /* the only weight available                 */
  letter-spacing: var(--display-tracking);
  line-height: var(--display-leading);
  color: var(--fg-1);
  text-wrap: balance;
  margin: 0;
}

h1 { font-size: var(--display-1); }
h2 { font-size: var(--display-2); }
h3 { font-size: var(--display-3); }
h4 {
  font-size: var(--display-4);
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: var(--display-tracking);
  line-height: var(--display-leading);
  margin: 0;
}

/* The poster move: lowercase headline like "we inspect the concrete" */
.fs-display--lower { text-transform: lowercase; }
.fs-display--upper { text-transform: uppercase; }

p {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--body-md);
  line-height: 1.55;
  color: var(--fg-1);
  margin: 0;
  text-wrap: pretty;
}

.fs-eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--ui-eyebrow);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--fg-1);
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
}
.fs-eyebrow::before {
  content: "";
  width: 10px; height: 10px;
  background: var(--fs-red);
  display: inline-block;
}

/* Numbers / step counters. For oversized stat numerals, prefer the display
   face (Montefiore) — it's the brand's "stat" feel. Inline numerals stay in
   Urbane Heavy so they match adjacent UI labels.                            */
.fs-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--ui-num);
  letter-spacing: 0;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.fs-num--ui {
  font-family: var(--font-body);
  font-weight: 900;
}

code, pre, .fs-mono {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9em;
}

/* ----------------------------------------------------------------------------
   Brutalist box — the central visual primitive.
   White surface, 2px black border, 4px hard offset shadow.
   ---------------------------------------------------------------------------- */
.fs-box {
  background: var(--bg-1);
  border: var(--border-w-1) solid var(--border);
  box-shadow: var(--shadow-md);
}
.fs-box--sm  { box-shadow: var(--shadow-sm); }
.fs-box--lg  { box-shadow: var(--shadow-lg); }
.fs-box--xl  { box-shadow: var(--shadow-xl); border-width: var(--border-w-2); }
.fs-box--red { background: var(--bg-red); color: var(--fg-on-red); }
.fs-box--dark{ background: var(--bg-dark); color: var(--fg-on-dark); }

/* Press: shadow collapses, box "punches in". */
.fs-box[role="button"]:active,
.fs-box.is-pressed {
  transform: translate(3px, 3px);
  box-shadow: 0 0 0 0 var(--shadow-ink);
}