:root {
  /* HashiCorp brand colors */
  --hc-black: #000000;
  --hc-white: #ffffff;
  --hc-gray-1: #f7f8fa;
  --hc-gray-2: #e7e8eb;
  --hc-gray-3: #bdbfc4;
  --hc-gray-4: #6c7178;
  --hc-gray-5: #3b3d45;
  --hc-gray-6: #1d1f27;

  /* Product colors */
  --hc-terraform: #7b42bc;
  --hc-vault: #ffcf25;
  --hc-consul: #f24c53;
  --hc-nomad: #00bc7f;
  --hc-packer: #02a8ef;
  --hc-vagrant: #1868f2;
  --hc-boundary: #f24c53;
  --hc-waypoint: #14c6cb;
}

/* Light mode */
[data-md-color-scheme="default"] {
  --md-primary-fg-color: #000000;
  --md-primary-fg-color--light: #3b3d45;
  --md-primary-fg-color--dark: #000000;
  --md-primary-bg-color: #ffffff;
  --md-accent-fg-color: #7b42bc;
  --md-typeset-a-color: #7b42bc;
}

/* Dark mode */
[data-md-color-scheme="slate"] {
  --md-primary-fg-color: #7b42bc;
  --md-primary-fg-color--light: #9a6dd1;
  --md-primary-fg-color--dark: #5c2d91;
  --md-primary-bg-color: #1d1f27;
  --md-accent-fg-color: #9a6dd1;
  --md-typeset-a-color: #9a6dd1;
  --md-default-bg-color: #1d1f27;
}

/* Code blocks */
.md-typeset code {
  border-radius: 4px;
}

/* Admonition customizations for HashiCorp products */
.md-typeset .admonition.terraform,
.md-typeset details.terraform {
  border-color: var(--hc-terraform);
}
.md-typeset .terraform > .admonition-title,
.md-typeset .terraform > summary {
  background-color: rgba(123, 66, 188, 0.1);
}
.md-typeset .terraform > .admonition-title::before,
.md-typeset .terraform > summary::before {
  background-color: var(--hc-terraform);
  -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M1 5.6v4.8l4.2 2.4V7.9L1 5.6zm4.8 10.8l4.2 2.4V14l-4.2-2.4v4.8zm0-6l4.2 2.4V8L5.8 5.6v4.8zm4.8-2.4v4.8l4.2-2.4V5.6l-4.2 2.4zm4.8 8.4l4.2 2.4V14l-4.2-2.4v4.8zm4.8-10.8l-4.2 2.4v4.8l4.2-2.4V5.6z"/></svg>');
  mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M1 5.6v4.8l4.2 2.4V7.9L1 5.6zm4.8 10.8l4.2 2.4V14l-4.2-2.4v4.8zm0-6l4.2 2.4V8L5.8 5.6v4.8zm4.8-2.4v4.8l4.2-2.4V5.6l-4.2 2.4zm4.8 8.4l4.2 2.4V14l-4.2-2.4v4.8zm4.8-10.8l-4.2 2.4v4.8l4.2-2.4V5.6z"/></svg>');
}

.md-typeset .admonition.vault,
.md-typeset details.vault {
  border-color: var(--hc-vault);
}
.md-typeset .vault > .admonition-title,
.md-typeset .vault > summary {
  background-color: rgba(255, 207, 37, 0.1);
}

.md-typeset .admonition.consul,
.md-typeset details.consul {
  border-color: var(--hc-consul);
}
.md-typeset .consul > .admonition-title,
.md-typeset .consul > summary {
  background-color: rgba(242, 76, 83, 0.1);
}

.md-typeset .admonition.nomad,
.md-typeset details.nomad {
  border-color: var(--hc-nomad);
}
.md-typeset .nomad > .admonition-title,
.md-typeset .nomad > summary {
  background-color: rgba(0, 188, 127, 0.1);
}

/* Navigation styling */
.md-tabs {
  background-color: var(--md-primary-fg-color);
}

/* Header */
.md-header {
  background-color: var(--md-primary-fg-color);
}

/* Footer */
.md-footer {
  background-color: var(--hc-gray-6);
}

/* Cards for project showcase */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
  margin: 1rem 0;
}

.card {
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 8px;
  padding: 1.5rem;
  transition: all 0.2s ease;
}

.card:hover {
  border-color: var(--md-accent-fg-color);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.card h3 {
  margin-top: 0;
}

/* Product badges */
.badge {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  margin-right: 0.5rem;
}

.badge-terraform { background-color: var(--hc-terraform); color: white; }
.badge-vault { background-color: var(--hc-vault); color: black; }
.badge-consul { background-color: var(--hc-consul); color: white; }
.badge-nomad { background-color: var(--hc-nomad); color: white; }
.badge-packer { background-color: var(--hc-packer); color: white; }
.badge-aws { background-color: #ff9900; color: black; }
.badge-azure { background-color: #0078d4; color: white; }
.badge-gcp { background-color: #4285f4; color: white; }