/* Design tokens: override per client fork */

:root {
  color-scheme: light;

  /* Brand: Hemsley Building Services, "Slate sett and stone".
   * Every value derives from the client's own assets, measured 2026-08-20:
   * #47576f is the slate blue of his paving-sett logo mark, #1a1f2d is the
   * ink his Squarespace site uses for headings and buttons, #70809b is the
   * grey blue of "Building Services" in his lockup, #f2f5f6 is the light
   * ground swatch his own site ships. Nothing invented.
   *
   * IMPORTANT: --color-secondary is a light stone FILL ONLY token (button
   * backgrounds, decorative bars, icon backgrounds, rules) carrying ink text
   * via --color-secondary-fg. --color-accent (his grey blue) is fill-only
   * under the same rule. Run `npm run check` to validate contrast after any
   * token override. */
  --color-primary: #47576f;
  --color-primary-hover: #38465b;
  --color-primary-fg: #ffffff;
  --color-secondary: #dfe5ec;
  --color-secondary-hover: #cbd4de;
  --color-secondary-fg: #1a1f2d;
  --color-accent: #70809b;

  /* Neutrals: his light ground, his ink. */
  --color-bg: #f2f5f6;
  --color-bg-alt: #ffffff;
  --color-bg-dark: #1a1f2d;
  --color-fg: #1a1f2d;
  --color-fg-muted: #46536b;
  --color-fg-subtle: #5d6a84;
  --color-fg-inverse: #f2f5f6;
  --color-border: #d8dee6;
  --color-border-strong: #aeb9c6;

  /* Status */
  --color-success: #2f8a5f;
  --color-danger: #c44a4a;
  --color-warning: #d99a39;

  /* Hero overlay (gradient on top of background image).
     Front-loaded on purpose. The landing still has a bright overcast sky across
     its top right, and the old 0.45 top stop left white headline text at 2.67:1
     over the brightest sky pixels, which fails AA. The scrim is now strongest
     where the h1 and lede sit and eases into the existing dark fade at the base,
     so the paving in the lower half keeps its detail. Measured worst case at
     0.66: 5.1:1. Do not lower the first stop without re-measuring against the
     brightest pixels behind the text, not the average. */
  --overlay-hero: linear-gradient(180deg, rgba(20, 25, 40, 0.66) 0%, rgba(20, 25, 40, 0.64) 55%, rgba(20, 25, 40, 0.78) 100%);

  /* Typography */
  /* Fonts: Inter for body and UI. Display is EB Garamond, a deliberate
     per-client serif override (allowed per CLAUDE.md): the client's own
     wordmark and site are set in a classical serif (minerva-modern), and
     identity is derived from his branding. Not Fraunces; that stays retired. */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --font-display: "EB Garamond", Georgia, "Times New Roman", serif;

  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.25rem;
  --fs-2xl: 1.5rem;
  --fs-3xl: 2rem;
  --fs-4xl: 2.5rem;
  --fs-5xl: 3rem;
  --fs-6xl: 4rem;

  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 900;

  --lh-tight: 1.2;
  --lh-snug: 1.375;
  --lh-normal: 1.5;
  --lh-relaxed: 1.7;

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.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;

  /* Layout */
  --container-max: 1200px;
  --container-narrow: 800px;
  --container-padding: var(--space-6);

  /* Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 20px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
  --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.15);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 400ms;

  /* Z-index */
  --z-header: 100;
  --z-mobile-nav: 200;
  --z-back-to-top: 250;
  /* Below --z-mobile-nav (200) on purpose: when the phone menu is open it must
     cover the call bar, not sit behind it. */
  --z-callbar: 150;
  --z-wa: 145;
  --z-cookie: 300;
  --z-modal: 1000;
}