/*
  Design tokens for House Safe Windows.
  Fonts (T002): display = "Amagro" (headings, matching the reference site);
  body = "Inter" (sans, body/UI). Amagro is hosted locally and the body font is
  loaded via Google Fonts. The fallback stacks keep the site readable if a
  font cannot be loaded.

  Breakpoints used throughout the CSS (documented here since custom
  properties can't be interpolated into @media queries):
    480px  - large phone
    768px  - tablet
    1024px - small desktop
    1280px - wide desktop (matches --content-max)
*/

@font-face {
  font-family: "Amagro";
  src: url('../fonts/amagro-bold.woff2') format('woff2');
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

:root {
  /* Color palette */
  --color-ink: #111111;
  --color-ink-warm: #1b0f10;
  --color-stone: #ece7df;
  --color-stone-dark: #d9d2c5;
  --color-white: #ffffff;

  --color-accent: #b08d57;
  --color-accent-light: #cba876;
  --color-accent-dark: #8a6b3d;

  --color-text: #1a1714;
  --color-text-muted: #6b6560;
  --color-text-on-dark: #f5f2ec;
  --color-text-on-dark-muted: #c9c2b8;

  --color-grey-100: #f4f2ef;
  --color-grey-300: #c9c4bd;
  --color-grey-500: #8f8983;
  --color-grey-700: #4a4642;

  --color-border: rgba(17, 17, 17, 0.12);
  --color-border-on-dark: rgba(245, 242, 236, 0.16);
  --color-error: #c0392b;

  /* Typography */
  --font-display: "Amagro", "Playfair Display", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --fs-h1: clamp(2.25rem, 1.6rem + 3vw, 4rem);
  --fs-h2: clamp(1.75rem, 1.4rem + 1.6vw, 2.75rem);
  --fs-h3: clamp(1.2rem, 1.1rem + 0.5vw, 1.5rem);
  --fs-lede: clamp(1.05rem, 1rem + 0.3vw, 1.25rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;

  --lh-tight: 1.15;
  --lh-normal: 1.65;

  /* Spacing scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --space-7: 4.5rem;
  --space-8: 6rem;

  --content-max: 1280px;
  --radius: 6px;
  --transition: 200ms ease;
}