/* Global Colours for light them */
:root > * {
  --md-primary-fg-color: #e6195e;
  --md-accent-fg-color: #2b41ea;
}

/* Global Colours for dark theme */
[data-md-color-scheme="slate"] {
  --md-primary-fg-color: #ffffff;
  --md-accent-fg-color: #e6195e;
}

/* Custom Gradient for Primary Buttons made by Gemini */
.md-typeset .md-button.md-button--primary {
  /* We create a 'triple' gradient: Pink -> Blue -> Pink */
  /* This allows the color to slide seamlessly on hover */
  background: linear-gradient(to right, #E6195E 0%, #2B41EA 50%, #E6195E 100%);
  background-size: 200% auto;
  background-position: 0% center;
  
  border-color: transparent;
  color: #ffffff;
  
  /* Increased duration to 0.6s for that 'smooth' premium feel */
  transition: background-position 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Inverted Gradient on Hover */
.md-typeset .md-button.md-button--primary:hover {
  /* Slide the background to show the Blue -> Pink section */
  background-position: 100% center;
  
  /* Ensure the border stays hidden and text stays white */
  border-color: transparent;
  color: #ffffff;
}

/* --- 1. Define Roboto (For Headers) --- */

/* Roboto Regular (400) */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/roboto-v50-latin-regular.woff2') format('woff2'); /* Updated to v50 */
}

/* Roboto Bold (700) */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/roboto-v50-latin-700.woff2') format('woff2'); /* Updated to v50 */
}

/* --- 2. Define Lato (For Body Text) --- */

/* Lato Regular (400) */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/lato-v25-latin-regular.woff2') format('woff2'); /* Updated to v25 */
}

/* Lato Italic (400i) */
@font-face {
  font-family: 'Lato';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/lato-v25-latin-italic.woff2') format('woff2'); /* Updated to v25 */
}

/* Lato Bold (700) */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/lato-v25-latin-700.woff2') format('woff2'); /* Updated to v25 */
}

/* --- 3. Apply the Fonts --- */

:root {
  /* Set the global body text to Lato */
  --md-text-font: "Lato"; 
  /* Set code font to standard monospace */
  --md-code-font: monospace; 
}

/* --- 4. Force Headers to use Roboto --- */

/* We target the typography wrapper (.md-typeset) to override the default theme */
.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4,
.md-typeset h5,
.md-typeset h6 {
  font-family: "Roboto", sans-serif;
  font-weight: 700; 
}