/* GraniteIX Brand Overrides
 * Colors from Brand Guidelines 2025 V1.0
 * Fonts: Oxanium (headers), Inter (body)
 */

/* ── Fonts ─────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Oxanium:wght@400;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

/* ── Brand tokens ───────────────────────────────────────────── */
:root {
  /* Typography */
  --condensed-font-family: "Oxanium", "Verdana", "DejaVu Sans", sans-serif;
  --rounded-font-family:   "Inter",   "Verdana", "DejaVu Sans", sans-serif;

  /* Granite Green */
  --granite-green-light: #adc9a0;
  --granite-green-mid:   #7ba866;
  --granite-green:       #5a9240;
  --granite-green-dark:  #497637;
  --granite-green-deep:  #2e4922;

  /* Darkmode Slate Gray */
  --granite-slate-light: #98a2a9;
  --granite-slate-mid:   #5b6c75;
  --granite-slate:       #324752;
  --granite-slate-dark:  #283942;
  --granite-slate-deep:  #192429;

  /* Iceberg Blue */
  --granite-blue-light:  #a2c9d5;
  --granite-blue-mid:    #6aa8bb;
  --granite-blue:        #4592aa;
  --granite-blue-dark:   #397588;
  --granite-blue-deep:   #234955;

  /* Mid Grays */
  --granite-gray-light:  #b0b9be;
  --granite-gray-mid:    #818e96;
  --granite-gray:        #61727c;
  --granite-gray-dark:   #4e5c64;
  --granite-gray-deep:   #31393e;

  /* Lightmode Silver */
  --granite-silver-50:   #eaedef;
  --granite-silver-20:   #dde3e6;
  --granite-silver:      #d5dce0;

  /* Theme variable overrides — light mode */
  --primary-400: var(--granite-green-mid);
  --primary-500: var(--granite-green);
  --primary-600: var(--granite-green);
  --primary-700: var(--granite-green-dark);
  --primary-800: var(--granite-green-deep);

  --link-color:       var(--granite-blue);
  --link-color-hover: var(--granite-blue-dark);

  --gray-200: var(--granite-silver-50);
  --gray-300: var(--granite-silver-20);
  --gray-400: var(--granite-silver);
  --gray-700: var(--granite-gray-mid);
  --gray-800: var(--granite-slate);
}

/* ── Light mode base ────────────────────────────────────────── */
body {
  background-color: #ffffff;
  color: var(--granite-slate);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--condensed-font-family);
  color: var(--granite-slate);
  letter-spacing: 0.02em;
}

/* Tighten header drop shadow — more polished */
.header::after {
  background: linear-gradient(180deg, rgba(50, 71, 82, 0.08) 0%, transparent 100%);
}

/* Logo sizing */
.header .logo {
  max-width: 160px;
  max-height: 44px;
}

/* Nav link uppercase with Oxanium feels on-brand */
.main-menu__wrapper .top-menu-item > a {
  font-family: var(--condensed-font-family);
  letter-spacing: 0.06em;
}

/* CTA button — Granite Green */
.button,
a.button {
  background-color: var(--granite-green);
  border-color: var(--granite-green);
  font-family: var(--condensed-font-family);
  letter-spacing: 0.04em;
}
.button:hover,
a.button:hover {
  background-color: var(--granite-green-dark);
  border-color: var(--granite-green-dark);
}

/* Secondary button */
.button.secondary,
a.button.secondary {
  background-color: transparent;
  border: 2px solid var(--granite-blue);
  color: var(--granite-blue);
}
.button.secondary:hover,
a.button.secondary:hover {
  background-color: var(--granite-blue);
  color: #ffffff;
}

/* Tertiary button */
.button.tertiary,
a.button.tertiary {
  background-color: transparent;
  border: 2px solid var(--granite-green-mid);
  color: var(--granite-green-mid);
}
.button.tertiary:hover,
a.button.tertiary:hover {
  background-color: var(--granite-green-mid);
  color: var(--granite-slate-deep);
}

/* Footer — use deep slate instead of pure black */
.footer {
  background-color: var(--granite-slate-deep);
}
.footer--link-color-hover {
  color: var(--granite-green-mid);
}

/* ── Dark mode ──────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  body {
    background-color: var(--granite-slate-deep);
    color: var(--granite-silver);
  }

  /* Override theme color tokens for dark context */
  :root {
    --text-color:             var(--granite-silver);
    --link-color:             var(--granite-blue-mid);
    --link-color-hover:       var(--granite-blue-light);
    --menu-link-color:        var(--granite-silver);
    --menu-link-color-hover:  var(--granite-green-light);
    --gray-700:               var(--granite-silver-20);
    --gray-300:               var(--granite-slate-dark);
    --gray-200:               var(--granite-slate);
  }

  h1, h2, h3, h4, h5, h6 {
    color: var(--granite-silver);
  }

  /* Header */
  .header,
  .main-menu {
    background-color: var(--granite-slate-dark);
    border-bottom: 1px solid var(--granite-slate);
  }

  .header::after {
    background: linear-gradient(180deg, rgba(0,0,0,0.3) 0%, transparent 100%);
  }

  /* Swap logo to light variant in dark mode */
  .header .logo {
    content: url('/img/GraniteIX_Logo_Color_Light.svg');
  }

  /* Mobile nav overlay */
  .main-menu.is-active {
    background-color: var(--granite-slate-dark);
  }

  /* Dropdown sub-menus */
  .sub-menu__nav {
    background-color: var(--granite-slate-dark) !important;
    border-color: var(--granite-slate) !important;
  }

  /* Cards */
  .card {
    background-color: var(--granite-slate-dark);
    border-color: var(--granite-slate);
  }

  /* Intro blocks */
  .intro {
    color: var(--granite-silver-20);
  }

  /* Horizontal rules */
  hr {
    border-color: var(--granite-slate);
  }

  /* Footer stays the same but deepen it slightly */
  .footer {
    background-color: #111a1f;
  }

  /* Tables */
  table th {
    background-color: var(--granite-slate);
    color: var(--granite-silver);
  }
  table td {
    border-color: var(--granite-slate);
  }
  table tr:nth-child(even) {
    background-color: var(--granite-slate-dark);
  }

  /* External link icon — invert for dark backgrounds */
  .main-menu__wrapper .external-link::after,
  .main-menu__wrapper .child-external-link span.menu-item__name::after {
    filter: invert(1) opacity(0.7);
  }

  /* Hamburger lines */
  .hamburger-inner,
  .hamburger-inner::before,
  .hamburger-inner::after {
    background-color: var(--granite-silver);
  }
}

/* ── Intro shortcode accent ─────────────────────────────────── */
.intro {
  font-size: 1.2em;
  line-height: 1.7;
  color: var(--granite-gray);
}

/* ── Connection option cards — subtle top border accent ─────── */
.cards .card {
  border-top: 3px solid var(--granite-green);
}

/* ── Responsive table header color ─────────────────────────── */
table th {
  background-color: var(--granite-slate);
  color: #ffffff;
}