/* ===========================
   BG Group – Global Styles
   =========================== */

/* Reset / Base */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background-color: var(--color-offwhite);
  color: var(--color-navy);
  line-height: 1.6;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

/* Brand Color Variables */
:root {
  --color-white: #FFFFFF;
  --color-offwhite: #F8F7F4;
  --color-icewhite: #F4F7FA;
  --color-navy: #0C1C3C;
  --color-grey: #C8C9CC;
  --color-gold: #daa520;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  color: var(--color-navy);
  line-height: 1.2;
}

h1 {
  font-size: 3rem; /* ~48px */
  letter-spacing: -0.5px;
}

h2 {
  font-size: 2.25rem; /* ~36px */
}

h3 {
  font-size: 1.5rem; /* ~24px */
}

p {
  font-size: 1rem; /* ~16px */
  margin-bottom: 1rem;
  color: var(--color-navy);
}

/* Links */
a {
  color: var(--color-navy);
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover {
  color: var(--color-gold);
}

/* Buttons */
button, .btn {
  font-family: inherit;
  font-weight: 500;
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.btn-primary {
  background-color: var(--color-navy);
  color: var(--color-white);
}

.btn-primary:hover {
  background-color: var(--color-gold);
  color: var(--color-navy);
}

.btn-secondary {
  background-color: var(--color-offwhite);
  color: var(--color-navy);
  border: 1px solid var(--color-navy);
}

.btn-secondary:hover {
  background-color: var(--color-navy);
  color: var(--color-white);
}

/* Utility Backgrounds */
.bg-offwhite { background-color: var(--color-offwhite); }
.bg-navy { background-color: var(--color-navy); color: var(--color-white); }
.bg-gold { background-color: var(--color-gold); color: var(--color-navy); }

/* Utility Text */
.text-navy { color: var(--color-navy); }
.text-gold { color: var(--color-gold); }
.text-grey { color: var(--color-grey); }

/* Gradient Fade Utilities */
.bg-ow-to-ice {
  background: linear-gradient(to bottom, var(--color-offwhite), var(--color-icewhite));
}

.bg-ice-to-ow {
  background: linear-gradient(to bottom, var(--color-icewhite), var(--color-offwhite));
}