/* ============================================================
   Gorilla Contracting — Design System
   Global stylesheet entry point. Consumers link THIS file only.
   Import order: fonts → tokens → base.
   ============================================================ */

/* ============================================================
   Gorilla Contracting — Webfonts
   Display: Vampire Wars (Darrell Flood) — all-caps headline face
   Body:    PT Serif (Google / ParaType) — body + UI copy
   ============================================================ */

@font-face {
  font-family: "Vampire Wars";
  src: url("../fonts/vampire-wars-regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Vampire Wars";
  src: url("../fonts/vampire-wars-italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "PT Serif";
  src: url("../fonts/pt-serif-regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "PT Serif";
  src: url("../fonts/pt-serif-italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "PT Serif";
  src: url("../fonts/pt-serif-bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "PT Serif";
  src: url("../fonts/pt-serif-bolditalic.ttf") format("truetype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* ============================================================
   Gorilla Contracting — Color Tokens
   Brand palette (from brand guide):
     Black        #000000
     White        #FFFFFF
     Gorilla Grey #A7ACAF
     Gorilla Orange (accent) #F47629
   Neutrals + accent ramps below are harmonious extensions of
   those four, used for surfaces, borders, hover/press states.
   ============================================================ */

:root {
  /* ---- Brand core (exact, from brand guide) ---- */
  --gor-black: #000000;
  --gor-white: #ffffff;
  --gor-grey: #a7acaf;   /* Gorilla Grey */
  --gor-orange: #f47629; /* Gorilla Orange — accent */

  /* ---- Ink / charcoal ramp (dark surfaces) ---- */
  --ink-950: #000000;
  --ink-900: #0a0a0b;
  --ink-850: #121315;
  --ink-800: #1a1c1e;
  --ink-700: #242729;
  --ink-600: #34383b;
  --ink-500: #4a4f53;

  /* ---- Steel / grey ramp (anchored on Gorilla Grey) ---- */
  --steel-600: #6b7074;
  --steel-500: #868c90;
  --steel-400: #a7acaf;  /* = Gorilla Grey */
  --steel-300: #c3c7c9;
  --steel-200: #dde0e1;
  --steel-100: #eef0f0;
  --steel-50:  #f6f7f7;

  /* ---- Orange ramp (accent) ---- */
  --orange-700: #b9530f; /* pressed */
  --orange-600: #d8600f; /* hover */
  --orange-500: #f47629; /* = Gorilla Orange */
  --orange-400: #f7944f;
  --orange-300: #fab27e;
  --orange-100: #fde7d6; /* faint tint */

  /* ---- Status (industrial, muted) ---- */
  --signal-success: #3f8f4f;
  --signal-warning: #e0a106;
  --signal-danger:  #c43b2b;

  /* ============================================================
     SEMANTIC ALIASES — light context (default)
     ============================================================ */
  --bg-base: var(--gor-white);
  --bg-subtle: var(--steel-50);
  --bg-muted: var(--steel-100);
  --surface-card: var(--gor-white);
  --surface-inset: var(--steel-50);

  --text-primary: var(--gor-black);
  --text-secondary: var(--ink-600);
  --text-muted: var(--steel-600);
  --text-inverse: var(--gor-white);
  --text-accent: var(--orange-600);

  --border-strong: var(--gor-black);
  --border: var(--steel-200);
  --border-subtle: var(--steel-100);

  --accent: var(--gor-orange);
  --accent-hover: var(--orange-600);
  --accent-press: var(--orange-700);
  --accent-tint: var(--orange-100);
  --on-accent: var(--gor-white);

  --focus-ring: var(--orange-500);
}

/* ============================================================
   DARK CONTEXT — hero blocks, footers, photo overlays.
   Apply with class="on-dark" (or [data-theme="dark"]).
   ============================================================ */
.on-dark,
[data-theme="dark"] {
  --bg-base: var(--gor-black);
  --bg-subtle: var(--ink-900);
  --bg-muted: var(--ink-850);
  --surface-card: var(--ink-850);
  --surface-inset: var(--ink-800);

  --text-primary: var(--gor-white);
  --text-secondary: var(--steel-300);
  --text-muted: var(--steel-500);
  --text-inverse: var(--gor-black);
  --text-accent: var(--orange-400);

  --border-strong: var(--gor-white);
  --border: var(--ink-600);
  --border-subtle: var(--ink-700);

  --accent: var(--gor-orange);
  --accent-hover: var(--orange-400);
  --accent-press: var(--orange-600);
  --accent-tint: rgba(244, 118, 41, 0.16);
  --on-accent: var(--gor-white);
}

/* ============================================================
   Gorilla Contracting — Typography Tokens
   Display headlines:  Vampire Wars — ALL CAPS, angular, heavy.
                       Use for hero/section headlines ONLY.
                       Never for running text or anything < ~22px.
   Body + UI:          PT Serif — paragraphs, labels, buttons, nav.
   UI labels/eyebrows: PT Serif Bold, UPPERCASE, tracked out.
   ============================================================ */

:root {
  /* ---- Families ---- */
  --font-display: "Vampire Wars", "Arial Narrow", sans-serif;
  --font-body: "PT Serif", Georgia, "Times New Roman", serif;
  --font-ui: "PT Serif", Georgia, serif; /* small labels, buttons, nav */

  /* ---- Weights ---- */
  --fw-regular: 400; /* @kind font */
  --fw-bold: 700; /* @kind font */

  /* ---- Display scale (Vampire Wars; line-heights are tight) ---- */
  --display-2xl: 6.5rem;   /* 104px — hero monolith */
  --display-xl: 4.5rem;    /* 72px  */
  --display-lg: 3.25rem;   /* 52px  — section headline */
  --display-md: 2.25rem;   /* 36px  */
  --display-sm: 1.5rem;    /* 24px  — smallest display use */
  --display-line: 0.94; /* @kind other */
  --display-tracking: 0.01em; /* @kind other */

  /* ---- Body / text scale (PT Serif) ---- */
  --text-2xl: 1.75rem;   /* 28px — lead paragraph */
  --text-xl: 1.375rem;   /* 22px */
  --text-lg: 1.125rem;   /* 18px — default body */
  --text-md: 1rem;       /* 16px */
  --text-sm: 0.875rem;   /* 14px */
  --text-xs: 0.75rem;    /* 12px — fine print */
  --body-line: 1.65; /* @kind other */
  --body-line-tight: 1.35; /* @kind other */

  /* ---- Label / eyebrow (uppercase tracked) ---- */
  --label-size: 0.8125rem;  /* 13px */
  --label-tracking: 0.18em; /* @kind other */
  --label-weight: 700; /* @kind font */
}

/* ============================================================
   Gorilla Contracting — Spacing & Layout Tokens
   Generous, structural spacing — the brand wants room to breathe.
   Base unit = 4px. Section rhythm is large.
   ============================================================ */

:root {
  /* ---- Spacing scale (4px base) ---- */
  --space-0: 0;
  --space-1: 0.25rem;  /* 4 */
  --space-2: 0.5rem;   /* 8 */
  --space-3: 0.75rem;  /* 12 */
  --space-4: 1rem;     /* 16 */
  --space-5: 1.5rem;   /* 24 */
  --space-6: 2rem;     /* 32 */
  --space-7: 3rem;     /* 48 */
  --space-8: 4rem;     /* 64 */
  --space-9: 6rem;     /* 96 */
  --space-10: 8rem;    /* 128 — section padding */

  /* ---- Section rhythm ---- */
  --section-y: clamp(4rem, 9vw, 8rem); /* @kind spacing */
  --gutter: clamp(1.25rem, 5vw, 4rem); /* @kind spacing */
  --content-max: 1280px; /* @kind spacing */
  --measure: 68ch; /* @kind spacing */

  /* ---- Radii — industrial: mostly sharp, slight softening only ---- */
  --radius-none: 0;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 6px;
  --radius-pill: 999px;

  /* ---- Borders ---- */
  --border-hairline: 1px; /* @kind spacing */
  --border-thick: 2px; /* @kind spacing */
  --border-heavy: 4px; /* @kind spacing */
}

/* ============================================================
   Gorilla Contracting — Effects: shadows, overlays, motion
   The aesthetic is flat & structural. Shadows are restrained;
   depth comes from heavy black rules, bold blocks, and photo
   contrast — not soft floating cards.
   ============================================================ */

:root {
  /* ---- Shadows (used sparingly — only for raised/floating UI) ---- */
  --shadow-none: none;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.12);
  --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.14);
  --shadow-lg: 0 18px 44px rgba(0, 0, 0, 0.22);
  /* Hard "block" shadow — offset, no blur. The signature industrial lift. */
  --shadow-block: 6px 6px 0 var(--gor-black);
  --shadow-block-accent: 6px 6px 0 var(--gor-orange);

  /* ---- Photo treatment ---- */
  /* Brand imagery is black & white. Apply to colour photos to match. */
  --filter-bw: grayscale(100%) contrast(1.05); /* @kind other */
  /* Legibility scrims for text over photography */
  --scrim-bottom: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.05) 35%, rgba(0,0,0,0.82) 100%); /* @kind other */
  --scrim-left: linear-gradient(90deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.45) 45%, rgba(0,0,0,0) 100%); /* @kind other */
  --scrim-full: rgba(0, 0, 0, 0.55);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --dur-fast: 120ms; /* @kind other */
  --dur-base: 200ms; /* @kind other */
  --dur-slow: 360ms; /* @kind other */

  /* ---- Focus ---- */
  --focus-width: 3px; /* @kind spacing */
  --focus-offset: 2px; /* @kind spacing */
}

/* ============================================================
   Gorilla Contracting — Base element defaults
   Sensible brand defaults applied to raw HTML elements so any
   consumer page inherits the voice. Utility-light by design.
   ============================================================ */

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-lg);
  line-height: var(--body-line);
  color: var(--text-primary);
  background: var(--bg-base);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---- Display headlines ---- */
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  line-height: var(--display-line);
  letter-spacing: var(--display-tracking);
  text-transform: uppercase;
  margin: 0 0 var(--space-4);
  color: var(--text-primary);
}
h1 { font-size: var(--display-xl); }
h2 { font-size: var(--display-lg); }
h3 { font-size: var(--display-md); }

/* ---- Sub-heads use the body face (bold) for legibility ---- */
h4, h5, h6 {
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  line-height: var(--body-line-tight);
  margin: 0 0 var(--space-3);
  color: var(--text-primary);
}
h4 { font-size: var(--text-2xl); }
h5 { font-size: var(--text-xl); }
h6 {
  font-size: var(--label-size);
  text-transform: uppercase;
  letter-spacing: var(--label-tracking);
  color: var(--text-accent);
}

p { margin: 0 0 var(--space-5); max-width: var(--measure); }

a {
  color: var(--text-accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
a:hover { border-bottom-color: currentColor; }

strong, b { font-weight: var(--fw-bold); }

hr {
  border: 0;
  border-top: var(--border-heavy) solid var(--border-strong);
  margin: var(--space-7) 0;
}

::selection { background: var(--gor-orange); color: var(--gor-white); }

:focus-visible {
  outline: var(--focus-width) solid var(--focus-ring);
  outline-offset: var(--focus-offset);
}

img, video { display: block; max-width: 100%; }