/*
 * VIP BUSINESS GOLF NETWORK TYPOGRAPHY SYSTEM v1.0
 *
 * Logo-inspired type direction implemented with Tinos + Source Sans Pro
 * Typography direction: Editorial luxury hierarchy based on the supplied VIP Business Golf Network vector logo, using locally bundled open-licensed font alternatives.
 * Display and section headings use the shared regular-weight editorial serif token.
 * Body copy and smaller text preserve their existing hierarchy and sizing.
 */


/* Local, licensed web fonts: Tinos (Apache-2.0) and Source Sans Pro (SIL OFL 1.1). */
@font-face {
  font-family: "Tinos";
  src: url("/media/fonts/tinos/Tinos-Regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Tinos";
  src: url("/media/fonts/tinos/Tinos-Italic.woff2") format("woff2");
  font-style: italic;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Tinos";
  src: url("/media/fonts/tinos/Tinos-Bold.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Tinos";
  src: url("/media/fonts/tinos/Tinos-BoldItalic.woff2") format("woff2");
  font-style: italic;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Source Sans Pro";
  src: url("/media/fonts/source-sans-pro/SourceSansPro-ExtraLight.woff2") format("woff2");
  font-style: normal;
  font-weight: 200;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans Pro";
  src: url("/media/fonts/source-sans-pro/SourceSansPro-ExtraLightItalic.woff2") format("woff2");
  font-style: italic;
  font-weight: 200;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans Pro";
  src: url("/media/fonts/source-sans-pro/SourceSansPro-Light.woff2") format("woff2");
  font-style: normal;
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans Pro";
  src: url("/media/fonts/source-sans-pro/SourceSansPro-LightItalic.woff2") format("woff2");
  font-style: italic;
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans Pro";
  src: url("/media/fonts/source-sans-pro/SourceSansPro-Regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans Pro";
  src: url("/media/fonts/source-sans-pro/SourceSansPro-Italic.woff2") format("woff2");
  font-style: italic;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans Pro";
  src: url("/media/fonts/source-sans-pro/SourceSansPro-Semibold.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans Pro";
  src: url("/media/fonts/source-sans-pro/SourceSansPro-SemiboldItalic.woff2") format("woff2");
  font-style: italic;
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans Pro";
  src: url("/media/fonts/source-sans-pro/SourceSansPro-Bold.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans Pro";
  src: url("/media/fonts/source-sans-pro/SourceSansPro-BoldItalic.woff2") format("woff2");
  font-style: italic;
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans Pro";
  src: url("/media/fonts/source-sans-pro/SourceSansPro-Black.woff2") format("woff2");
  font-style: normal;
  font-weight: 900;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans Pro";
  src: url("/media/fonts/source-sans-pro/SourceSansPro-BlackItalic.woff2") format("woff2");
  font-style: italic;
  font-weight: 900;
  font-display: swap;
}

:where(html) {
  font-family: var(--font-primary);
  color: var(--surface-text-primary);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

:where(body) {
  margin: 0;
  font-family: var(--font-primary);
  color: var(--surface-text-primary);
  line-height: var(--line-body);
  font-size: var(--font-body);
  font-weight: var(--font-weight-regular);
  letter-spacing: var(--tracking-normal);
}

/* --------------------------------------------------------------------------
 * DISPLAY
 * -------------------------------------------------------------------------- */

:where(.display-xl) {
  margin: 0;
  font-family: var(--font-heading);
  color: var(--surface-text-primary);
  font-size: var(--font-display-xl);
  font-weight: var(--font-section-heading-weight, var(--font-weight-regular));
  line-height: var(--line-display-xl);
  letter-spacing: var(--tracking-display);
  max-width: 100%;
}

:where(.display-lg) {
  margin: 0;
  font-family: var(--font-heading);
  color: var(--surface-text-primary);
  font-size: var(--font-display-lg);
  font-weight: var(--font-section-heading-weight, var(--font-weight-regular));
  line-height: var(--line-display-lg);
  letter-spacing: var(--tracking-display);
  max-width: 100%;
}

:where(.display-md) {
  margin: 0;
  font-family: var(--font-heading);
  color: var(--surface-text-primary);
  font-size: var(--font-display-md);
  font-weight: var(--font-section-heading-weight, var(--font-weight-regular));
  line-height: var(--line-display-md);
  letter-spacing: var(--tracking-display);
  max-width: 100%;
}

/* Common semantic aliases for existing page classes. */
:where(.hero-heading) {
  font-family: var(--font-heading);
  color: var(--surface-text-primary);
  font-size: var(--font-display-xl);
  font-weight: var(--font-section-heading-weight, var(--font-weight-regular));
  line-height: var(--line-display-xl);
  letter-spacing: var(--tracking-display);
}

/* --------------------------------------------------------------------------
 * HEADINGS
 * -------------------------------------------------------------------------- */

:where(h1) {
  margin: 0;
  font-family: var(--font-heading);
  color: var(--surface-text-primary);
  font-size: var(--font-h1);
  font-weight: var(--font-section-heading-weight, var(--font-weight-regular));
  line-height: var(--line-h1);
  letter-spacing: var(--tracking-normal);
  max-width: 100%;
}

:where(h2) {
  margin: 0;
  font-family: var(--font-heading);
  color: var(--surface-text-primary);
  font-size: var(--font-h2);
  font-weight: var(--font-section-heading-weight, var(--font-weight-regular));
  line-height: var(--line-h2);
  letter-spacing: var(--tracking-normal);
  max-width: 100%;
}

:where(h3) {
  margin: 0;
  font-family: var(--font-heading);
  color: var(--surface-text-primary);
  font-size: var(--font-h3);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-h3);
  letter-spacing: var(--tracking-normal);
  max-width: 100%;
}

:where(h4) {
  margin: 0;
  font-family: var(--font-heading);
  color: var(--surface-text-primary);
  font-size: var(--font-h4);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-h4);
  letter-spacing: var(--tracking-normal);
  max-width: 100%;
}

:where(h5) {
  margin: 0;
  font-family: var(--font-heading);
  color: var(--surface-text-primary);
  font-size: var(--font-h5);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-h5);
  letter-spacing: var(--tracking-normal);
  max-width: 100%;
}

:where(h6) {
  margin: 0;
  font-family: var(--font-heading);
  color: var(--surface-text-primary);
  font-size: var(--font-h6);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-h6);
  letter-spacing: var(--tracking-normal);
  max-width: 100%;
}

/* --------------------------------------------------------------------------
 * BODY
 * -------------------------------------------------------------------------- */

:where(p) {
  margin: 0;
  max-width: var(--content-measure);
  font-family: var(--font-primary);
  font-size: var(--font-body);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-body);
  color: var(--surface-text-secondary);
  letter-spacing: var(--tracking-normal);
}

:where(.text-xl, .body-xl) {
  font-family: var(--font-primary);
  font-size: var(--font-body-xl);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-body-xl);
  letter-spacing: var(--tracking-normal);
}

:where(.text-large, .lead, .large-body, .body-large) {
  font-family: var(--font-primary);
  font-size: var(--font-large-body);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-body-large);
  letter-spacing: var(--tracking-normal);
}

:where(.text-small, .body-small, small) {
  font-family: var(--font-primary);
  font-size: var(--font-small-body);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-small);
  color: var(--surface-text-secondary);
  letter-spacing: var(--tracking-normal);
}

:where(.caption) {
  font-family: var(--font-primary);
  font-size: var(--font-caption);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-caption);
  color: var(--surface-text-secondary);
  letter-spacing: var(--tracking-normal);
}

/* --------------------------------------------------------------------------
 * UI / NAVIGATION / CONTROLS
 * -------------------------------------------------------------------------- */

:where(nav, .navigation) {
  font-family: var(--font-primary);
  font-size: var(--font-nav);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-nav);
  letter-spacing: var(--tracking-normal);
}

:where(button, .button, input[type="button"], input[type="submit"]) {
  font-family: var(--font-button-family, var(--font-primary));
  font-size: var(--font-button);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-button);
  letter-spacing: var(--tracking-normal);
}

:where(.button-small) {
  font-family: var(--font-button-family, var(--font-primary));
  font-size: var(--font-button-small);
  font-weight: var(--font-weight-semibold);
  line-height: 1.43;
  letter-spacing: var(--tracking-normal);
}

:where(label, .label, .badge) {
  font-family: var(--font-primary);
  font-size: var(--font-label);
  font-weight: var(--font-weight-semibold);
  line-height: 1.50;
  letter-spacing: var(--tracking-normal);
}

:where(.overline) {
  font-family: var(--font-primary);
  font-size: var(--font-overline);
  font-weight: var(--font-weight-medium);
  line-height: 1.40;
  letter-spacing: var(--tracking-overline);
  text-transform: uppercase;
}

:where(input, textarea, select) {
  font-family: var(--font-form-family, var(--font-primary));
  font-size: var(--font-body);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-body);
  letter-spacing: var(--tracking-normal);
}

/* --------------------------------------------------------------------------
 * WIDTH / READING MEASURE
 * -------------------------------------------------------------------------- */

:where(.section-heading, .page-title) {
  max-width: 900px;
  font-family: var(--font-heading);
}

:where(.prose, .rich-text, .content-copy) {
  max-width: var(--content-measure);
}


/* Brand wordmark typography: mirror the supplied Times New Roman Italic lettering. */
:where(.brand-wordmark, .brand-tagline, .vip-brand-serif) {
  font-family: var(--font-brand);
  font-style: italic;
  letter-spacing: -0.015em;
}

/* Keep headings elegant but body copy and controls clean and highly readable. */
:where(h1, h2, h3, h4, h5, h6, .display-xl, .display-lg, .display-md, .hero-heading, .section-heading, .page-title) {
  text-wrap: pretty;
}