/**
 * Custom Fonts for Get Canopy Theme
 * 
 * Domaine Display - Headings
 * Work Sans - Body text
 */

/* Domaine Display - Bold */
@font-face {
  font-family: 'Domaine Display';
  src: url('./DomaineDispNar-Bold.woff2') format('woff2'),
       url('./DomaineDispNar-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  letter-spacing: 1px;
}

/* Domaine Display - Bold Italic */
@font-face {
  font-family: 'Domaine Display';
  src: url('./DomaineDispNar-BoldItalic.woff2') format('woff2'),
       url('./DomaineDispNar-BoldItalic.woff') format('woff');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
  letter-spacing: 1px;
}

/* Work Sans - Thin */
@font-face {
  font-family: 'Work Sans';
  src: url('./WorkSans-Thin.woff') format('woff');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

/* Work Sans - Extra Light */
@font-face {
  font-family: 'Work Sans';
  src: url('./WorkSans-ExtraLight.woff') format('woff');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

/* Work Sans - Light */
@font-face {
  font-family: 'Work Sans';
  src: url('./WorkSans-Light.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

/* Work Sans - Regular */
@font-face {
  font-family: 'Work Sans';
  src: url('./WorkSans-Regular.woff2') format('woff2'),
       url('./WorkSans-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Work Sans - Medium */
@font-face {
  font-family: 'Work Sans';
  src: url('./WorkSans-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* Work Sans - Semi Bold */
@font-face {
  font-family: 'Work Sans';
  src: url('./WorkSans-SemiBold.woff2') format('woff2'),
       url('./WorkSans-SemiBold.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* Work Sans - Bold */
@font-face {
  font-family: 'Work Sans';
  src: url('./WorkSans-Bold.woff2') format('woff2'),
       url('./WorkSans-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/**
 * Font Usage Guide
 * ================
 * 
 * Font Families (use Tailwind utilities or CSS variables):
 * - font-heading / --font-family-heading → Domaine Display (for headings)
 * - font-body / --font-family-body → Work Sans (body text, default)
 * - font-ui / --font-family-ui → Work Sans (UI elements)
 * - font-serif → Domaine Display (alternative)
 * - font-sans → Work Sans (alternative)
 * 
 * Font Weights (automatically selected by browser):
 * All Work Sans weights are registered under a single 'Work Sans' family.
 * Use standard font-weight values or Tailwind utilities:
 * 
 * - font-thin / font-weight: 100 → Work Sans Thin
 * - font-extralight / font-weight: 200 → Work Sans ExtraLight
 * - font-light / font-weight: 300 → Work Sans Light
 * - font-normal / font-weight: 400 → Work Sans Regular
 * - font-medium / font-weight: 500 → Work Sans Medium
 * - font-semibold / font-weight: 600 → Work Sans SemiBold
 * - font-bold / font-weight: 700 → Work Sans Bold / Domaine Display Bold
 * 
 * The browser automatically picks the correct font file based on weight.
 * 
 * Examples:
 * - <h1 class="font-heading font-bold">Heading</h1>
 * - <p class="font-body font-normal">Body text</p>
 * - <button class="font-ui font-semibold">Button</button>
 * - <p class="font-body" style="font-weight: 600;">Semi-bold text</p>
 */