:root {
  /* Primary brand colors */
  --md-primary-fg-color: #326CE5;          /* Kubernetes blue (kubernetes.io primary) */
  --md-primary-fg-color--light: #84A7EF;   /* Lighter Kubernetes blue */
  --md-primary-fg-color--dark: #234CA0;    /* Darker shade for hover or accents */

  /* Accent and secondary */
  --md-accent-fg-color: #3B7ABD;           /* Used for DEVOPS text */
  --md-accent-bg-color: #1E2A35;

  /* Call-to-action accent (complementary to the brand blue) */
  --cta-color: #F28C28;
  --cta-color-hover: #D4760F;
  --cta-text-color: #1A1A1A;               /* Dark text for AA contrast on --cta-color */
}

/* Dark mode: the primary blue is too dark for links on the slate background */
[data-md-color-scheme="slate"] {
  --md-typeset-a-color: #84A7EF;
}

/* Call-to-action buttons: .md-button .md-button--cta */
.md-typeset .md-button--cta {
  background-color: var(--cta-color);
  border-color: var(--cta-color);
  color: var(--cta-text-color);
}

.md-typeset .md-button--cta:hover,
.md-typeset .md-button--cta:focus {
  background-color: var(--cta-color-hover);
  border-color: var(--cta-color-hover);
  color: var(--cta-text-color);
}

/* Profile photo: ![alt](...){ .profile-photo } */
.md-typeset img.profile-photo {
  border: 4px solid var(--cta-color);
  border-radius: 1rem;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}