/*
  brand/typography.css

  Where your fonts get loaded.

  DEFAULT (shipped): Karla, self-hosted from brand/fonts/Karla.ttf. This
  keeps the template self-contained and privacy-friendly (GDPR-clean): no
  request goes out to Google, nothing phones home. Karla is a free, modern,
  highly legible sans-serif that works as a placeholder for almost any brand
  until you pick your own.

  When you run the brand intake conversation (guides/22-brand-intake.md,
  from Module 6), Claude swaps this for the fonts you
  choose. Three patterns supported:

  1) Self-hosted .ttf / .woff2 in brand/fonts/ (default, privacy-friendly)
  2) Google Fonts (easy, but loads from Google's servers)
  3) Mix and match
*/

/* YOURS: self-hosted Marcellus (headings, one weight) and PT Serif (body). */
@font-face {
  font-family: 'Marcellus';
  src: url('/brand/fonts/Marcellus-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'PT Serif';
  src: url('/brand/fonts/PT_Serif-Web-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'PT Serif';
  src: url('/brand/fonts/PT_Serif-Web-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* TEMPLATE DEFAULT: self-hosted Karla (variable, weight range 200 to 800). Kept as a fallback. */
@font-face {
  font-family: 'Karla';
  src: url('/brand/fonts/Karla.ttf') format('truetype');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

/*
  EASY OPTION: load Inter from Google Fonts instead of self-hosting.
  Uncomment the line below and set --font-heading / --font-body in
  brand/tokens.css to 'Inter'. Note: this sends every visitor's browser to
  Google's servers, which you may need to disclose in your privacy policy.

  @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap');
*/

/*
  YOUR OWN FONTS: drop .woff2 files in brand/fonts/, add a block like the
  ones below, then point --font-heading / --font-body in brand/tokens.css
  at the family name.

  @font-face {
    font-family: 'YourHeading';
    src: url('/brand/fonts/your-heading.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
  }

  @font-face {
    font-family: 'YourBody';
    src: url('/brand/fonts/your-body.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }
*/