@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins/Poppins-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins/Poppins-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins/Poppins-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins/Poppins-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins/Poppins-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Jost";
  src: url("../fonts/jost/Jost-Variable.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat/Montserrat-Variable.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;

  /* Brand assets. These must be declared in a stylesheet under assets/css:
     Chromium resolves relative url() values stored in custom properties against
     the stylesheet that uses the variable, so declaring them in document-level
     markup breaks the paths. Keep the file names in sync with src/site.mjs. */
  --asset-logo: url("../brand/logo.png");
  --asset-logo-light: url("../brand/logo-light.png");
  --asset-logo-small: url("../brand/logo-small.png");
  --asset-logo-small-light: url("../brand/logo-small-light.png");

  /* Brand primitives */
  --brand-primary: #cf2028;
  --brand-secondary: #050505;
  --brand-accent: #d6a84f;
  --brand-night: #050505;
  --brand-footer: #0b0b0d;
  --custom-primary: #cf2028;
  --custom-secondary: #050505;
  --custom-primary-contrast: #ffffff;

  /* Semantic color system */
  --theme-primary: var(--brand-primary);
  --theme-primary-hover: color-mix(in srgb, var(--theme-primary), #000000 24%);
  --theme-primary-soft: color-mix(in srgb, var(--theme-primary), #ffffff 89%);
  --theme-secondary: var(--brand-secondary);
  --theme-secondary-soft: color-mix(in srgb, var(--theme-secondary), #ffffff 88%);
  --theme-accent: var(--brand-accent);
  --theme-background: #ffffff;
  --theme-surface: #ffffff;
  --theme-surface-muted: #f5f5f4;
  --theme-surface-alt: #f7f1e8;
  --theme-surface-elevated: #ffffff;
  --theme-input-background: #ffffff;
  --theme-placeholder: #e5e5e3;
  --theme-heading: #111113;
  --theme-text: #414145;
  --theme-text-muted: #67676c;
  --theme-text-subtle: #7c7c81;
  --theme-text-faint: #a5a5aa;
  --theme-border: #ddddda;
  --theme-night: var(--brand-night);
  --theme-footer: var(--brand-footer);
  --theme-on-primary: #ffffff;
  --theme-on-dark: #ffffff;
  --theme-on-dark-muted: #b9b4bd;
  --theme-focus: color-mix(in srgb, var(--theme-primary), transparent 72%);
  --theme-focus-outline: color-mix(in srgb, var(--theme-accent), transparent 25%);
  --theme-shadow: rgba(5, 5, 5, 0.16);
  --theme-shadow-soft: rgba(5, 5, 5, 0.08);

  /* Full-bleed hero media and control surfaces */
  --hero-overlay-start: rgba(5, 5, 5, 0.94);
  --hero-overlay-middle: rgba(5, 5, 5, 0.68);
  --hero-overlay-end: rgba(5, 5, 5, 0.18);
  --hero-glass-surface: rgba(5, 5, 5, 0.66);
  --hero-glass-border: rgba(255, 255, 255, 0.24);
  --hero-aside-surface: color-mix(in srgb, var(--theme-night) 90%, var(--theme-primary));
  --hero-wash-start: color-mix(in srgb, var(--theme-primary) 78%, #050505);
  --hero-wash-middle: color-mix(in srgb, var(--theme-primary) 62%, transparent);
  --hero-control-surface: rgba(12, 12, 16, 0.34);
  --hero-control-surface-hover: rgba(12, 12, 16, 0.58);
  --hero-control-border: rgba(255, 255, 255, 0.42);
  --hero-progress-track: rgba(255, 255, 255, 0.32);
  --hero-progress-value: #ffffff;

  /* Compatibility aliases for the existing component layer */
  --color-ink: var(--theme-heading);
  --color-ink-soft: var(--theme-text);
  --color-paper: var(--theme-background);
  --color-surface: var(--theme-surface-muted);
  --color-line: var(--theme-border);
  --color-wine: var(--theme-primary);
  --color-wine-dark: var(--theme-primary-hover);
  --color-teal: var(--theme-secondary);
  --color-gold: var(--theme-accent);
  --color-night: var(--theme-night);
  --color-footer: var(--theme-footer);
  --color-white: #ffffff;

  /* Font families and weights */
  --font-family-poppins: "Poppins", Arial, sans-serif;
  --font-family-jost: "Jost", Arial, sans-serif;
  --font-family-montserrat: "Montserrat", Arial, sans-serif;
  --font-family-system: system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-family-editorial: Georgia, "Times New Roman", serif;
  --font-body: var(--font-family-poppins);
  --font-heading: var(--font-family-poppins);
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Global typography scale. Component CSS consumes these variables only. */
  --type-body-adjust: 0px;
  --type-display-adjust: 0px;
  --type-8: 8px;
  --type-10: 10px;
  --type-11: 11px;
  --type-12: calc(12px + var(--type-body-adjust));
  --type-13: calc(13px + var(--type-body-adjust));
  --type-14: calc(14px + var(--type-body-adjust));
  --type-15: calc(15px + var(--type-body-adjust));
  --type-16: calc(16px + var(--type-body-adjust));
  --type-17: calc(17px + var(--type-body-adjust));
  --type-18: calc(18px + var(--type-body-adjust));
  --type-19: calc(19px + var(--type-body-adjust));
  --type-20: calc(20px + var(--type-body-adjust));
  --type-21: calc(21px + var(--type-body-adjust));
  --type-22: calc(22px + var(--type-body-adjust));
  --type-23: calc(23px + var(--type-display-adjust));
  --type-24: calc(24px + var(--type-display-adjust));
  --type-25: calc(25px + var(--type-display-adjust));
  --type-26: calc(26px + var(--type-display-adjust));
  --type-27: calc(27px + var(--type-display-adjust));
  --type-28: calc(28px + var(--type-display-adjust));
  --type-29: calc(29px + var(--type-display-adjust));
  --type-30: calc(30px + var(--type-display-adjust));
  --type-31: calc(31px + var(--type-display-adjust));
  --type-32: calc(32px + var(--type-display-adjust));
  --type-34: calc(34px + var(--type-display-adjust));
  --type-36: calc(36px + var(--type-display-adjust));
  --type-37: calc(37px + var(--type-display-adjust));
  --type-38: calc(38px + var(--type-display-adjust));
  --type-39: calc(39px + var(--type-display-adjust));
  --type-40: calc(40px + var(--type-display-adjust));
  --type-41: calc(41px + var(--type-display-adjust));
  --type-42: calc(42px + var(--type-display-adjust));
  --type-43: calc(43px + var(--type-display-adjust));
  --type-44: calc(44px + var(--type-display-adjust));
  --type-46: calc(46px + var(--type-display-adjust));
  --type-48: calc(48px + var(--type-display-adjust));
  --type-51: calc(51px + var(--type-display-adjust));
  --type-52: calc(52px + var(--type-display-adjust));
  --type-58: calc(58px + var(--type-display-adjust));
  --type-64: calc(64px + var(--type-display-adjust));
  --type-72: calc(72px + var(--type-display-adjust));
  --type-90: calc(90px + var(--type-display-adjust));
  --type-130: calc(130px + var(--type-display-adjust));
  --font-size-body: var(--type-16);
  --font-size-navigation: var(--type-13);
  --font-size-button: var(--type-13);
  --font-size-label: var(--type-12);
  --font-size-caption: var(--type-13);
  --font-size-lead: var(--type-21);
  --font-size-card-title: var(--type-22);
  --line-height-tight: 1.15;
  --line-height-heading: 1.2;
  --line-height-body: 1.7;
  --line-height-control: 1.3;
  --letter-spacing-default: 0;

  /* Layout system */
  --container-gutter: 32px;
  --section-space: 112px;
  --transition: 180ms ease;
}

html[data-palette="gold"] {
  --brand-primary: #b8872d;
  --brand-secondary: #171719;
  --brand-accent: #cf2028;
  --brand-night: #090909;
  --brand-footer: #111113;
}

html[data-palette="forest"] {
  --brand-primary: #285f4d;
  --brand-secondary: #111113;
  --brand-accent: #d6a84f;
  --brand-night: #0d1512;
  --brand-footer: #101a16;
}

html[data-palette="monochrome"] {
  --brand-primary: #242428;
  --brand-secondary: #050505;
  --brand-accent: #9a9a9f;
  --brand-night: #050505;
  --brand-footer: #0b0b0d;
}

html[data-custom-theme="true"] {
  --brand-primary: var(--custom-primary);
  --brand-secondary: var(--custom-secondary);
  --theme-on-primary: var(--custom-primary-contrast);
}

html[data-theme="dark"] {
  color-scheme: dark;
  --theme-background: #09090a;
  --theme-surface: #111113;
  --theme-surface-muted: #161619;
  --theme-surface-alt: #1c1c1f;
  --theme-surface-elevated: #171719;
  --theme-input-background: #121214;
  --theme-placeholder: #252529;
  --theme-heading: #f7f7f5;
  --theme-text: #d0d0d2;
  --theme-text-muted: #b0b0b4;
  --theme-text-subtle: #94949a;
  --theme-text-faint: #77777e;
  --theme-border: #343438;
  --theme-night: #030304;
  --theme-footer: #050506;
  --theme-primary-soft: color-mix(in srgb, var(--theme-primary), #09090a 78%);
  --theme-secondary-soft: color-mix(in srgb, var(--theme-secondary), #09090a 72%);
  --theme-focus: color-mix(in srgb, var(--theme-primary), transparent 60%);
  --theme-focus-outline: color-mix(in srgb, var(--theme-accent), transparent 18%);
  --theme-shadow: rgba(0, 0, 0, 0.34);
  --theme-shadow-soft: rgba(0, 0, 0, 0.22);
}

html[data-font-body="jost"] { --font-body: var(--font-family-jost); }
html[data-font-body="montserrat"] { --font-body: var(--font-family-montserrat); }
html[data-font-body="system"] { --font-body: var(--font-family-system); }
html[data-font-heading="jost"] { --font-heading: var(--font-family-jost); }
html[data-font-heading="montserrat"] { --font-heading: var(--font-family-montserrat); }
html[data-font-heading="system"] { --font-heading: var(--font-family-system); }

html[data-type-scale="compact"] {
  --type-body-adjust: -1px;
  --type-display-adjust: -4px;
}

html[data-type-scale="large"] {
  --type-body-adjust: 1px;
  --type-display-adjust: 4px;
}

@media (max-width: 1399.98px) {
  :root {
    --section-space: 96px;
  }
}

@media (max-width: 1199.98px) {
  :root {
    --container-gutter: 28px;
    --section-space: 88px;
  }
}

@media (max-width: 991.98px) {
  :root {
    --section-space: 76px;
  }
}

@media (max-width: 767.98px) {
  :root {
    --container-gutter: 20px;
    --section-space: 64px;
  }
}