/* ===== Red Hat Display (400/600/700 normal) ===== */
@font-face {
  font-family: "Red Hat Display";
  src: url("../fonts/red-hat-display/files/red-hat-display-latin-400-normal.woff2") format("woff2"),
    url("../fonts/red-hat-display/files/red-hat-display-latin-400-normal.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Red Hat Display";
  src: url("../fonts/red-hat-display/files/red-hat-display-latin-600-normal.woff2") format("woff2"),
    url("../fonts/red-hat-display/files/red-hat-display-latin-600-normal.woff") format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Red Hat Display";
  src: url("../fonts/red-hat-display/files/red-hat-display-latin-700-normal.woff2") format("woff2"),
    url("../fonts/red-hat-display/files/red-hat-display-latin-700-normal.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ===== Barlow (400/600/700 normal) ===== */
@font-face {
  font-family: "Barlow";
  src: url("../fonts/barlow/files/barlow-latin-400-normal.woff2") format("woff2"),
    url("../fonts/barlow/files/barlow-latin-400-normal.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Barlow";
  src: url("../fonts/barlow/files/barlow-latin-600-normal.woff2") format("woff2"),
    url("../fonts/barlow/files/barlow-latin-600-normal.woff") format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Barlow";
  src: url("../fonts/barlow/files/barlow-latin-700-normal.woff2") format("woff2"),
    url("../fonts/barlow/files/barlow-latin-700-normal.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ===== Permanent Marker (400) ===== */
@font-face {
  font-family: "Permanent Marker";
  src: url("../fonts/permanent-marker/files/permanent-marker-latin-400-normal.woff2") format("woff2"),
    url("../fonts/permanent-marker/files/permanent-marker-latin-400-normal.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Fonts: Red Hat (primary), Barlow (secondary all-caps alt), Permanent Marker (tertiary accent) */
:root {
  /* Brand Colors */
  --era-red: #e4002a;
  --era-navy: #151F6D;
  --era-dark-red: #8A1538;
  --era-orange: #FF671F;
  --era-light-blue: #41B6E6;
  --era-purple: #5C068C;

  /* Neutrals & Tints */
  --era-putty: #C4BCB7;
  --era-blue-putty: #B8C8D3;
  --era-dark-putty: #575A5D;

  /* Grayscale */
  --k-0: #FFFFFF;
  --k-5: #F2F2F2;
  --k-10: #E6E6E6;
  --k-15: #D9D9D9;
  --k-30: #B3B3B3;
  --k-40: #999999;
  --k-50: #808080;
  --k-60: #666666;
  --k-70: #4D4D4D;
  --k-90: #262626;
  --k-100: #000000;

  /* Typography */
  --font-primary: "Red Hat Display", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  --font-secondary: "Barlow", "Red Hat Display", Arial, sans-serif;
  --font-tertiary: "Permanent Marker", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Layout */
  --content-max-width: 1200px;

  /* Bootstrap Overrides */
  --bs-primary: var(--era-red);
  --bs-secondary: var(--era-navy);
  --bs-success: var(--era-light-blue);
  --bs-info: var(--era-blue-putty);
  --bs-warning: var(--era-orange);
  --bs-danger: var(--era-dark-red);
  --bs-dark: var(--k-90);
  --bs-light: var(--k-10);

  /* Global Brand Variable */
  --brand: var(--era-red);
}

html,
body {
  font-family: var(--font-primary);
  color: var(--k-100);
  background: var(--k-0);
}

/* Color Utilities */
.text-era-red { color: var(--era-red) !important; }
.bg-era-red { background: var(--era-red) !important; }
.border-era-red { border-color: var(--era-red) !important; }

.text-era-navy { color: var(--era-navy) !important; }
.bg-era-navy { background: var(--era-navy) !important; }
.border-era-navy { border-color: var(--era-navy) !important; }

.text-era-dark-red { color: var(--era-dark-red) !important; }
.bg-era-dark-red { background: var(--era-dark-red) !important; }
.border-era-dark-red { border-color: var(--era-dark-red) !important; }

.text-era-orange { color: var(--era-orange) !important; }
.bg-era-orange { background: var(--era-orange) !important; }
.border-era-orange { border-color: var(--era-orange) !important; }

.text-era-light-blue { color: var(--era-light-blue) !important; }
.bg-era-light-blue { background: var(--era-light-blue) !important; }
.border-era-light-blue { border-color: var(--era-light-blue) !important; }

.text-era-purple { color: var(--era-purple) !important; }
.bg-era-purple { background: var(--era-purple) !important; }
.border-era-purple { border-color: var(--era-purple) !important; }

.text-putty { color: var(--era-putty) !important; }
.bg-putty { background: var(--era-putty) !important; }

.text-blue-putty { color: var(--era-blue-putty) !important; }
.bg-blue-putty { background: var(--era-blue-putty) !important; }

.text-dark-putty { color: var(--era-dark-putty) !important; }
.bg-dark-putty { background: var(--era-dark-putty) !important; }

/* Font Utilities */
.font-primary { font-family: var(--font-primary); }
.font-secondary {
  font-family: var(--font-secondary);
  letter-spacing: .02em;
  text-transform: uppercase;
}
.font-tertiary { font-family: var(--font-tertiary); }

/* Text Utilities */
.lead-tight { line-height: 1.2; }
.lead-relaxed { line-height: 1.6; }

/* Custom Components */
.btn-era {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--era-red);
  --bs-btn-border-color: var(--era-red);
  --bs-btn-hover-bg: #c80026;
  --bs-btn-hover-border-color: #c80026;
}

.btn-navy {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--era-navy);
  --bs-btn-border-color: var(--era-navy);
  --bs-btn-hover-bg: #0f194f;
  --bs-btn-hover-border-color: #0f194f;
}

.btn-outline-putty {
  --bs-btn-color: var(--era-dark-putty);
  --bs-btn-border-color: var(--era-dark-putty);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--era-dark-putty);
  --bs-btn-hover-border-color: var(--era-dark-putty);
}