/* CoolCatLib colors: Core's warm browns and oranges, Canvas's purple. */
:root {
  --ccl-orange: #e0703a;
  --ccl-purple: #9b4fd6;
  --ccl-brown: #5b3a2a;
}

[data-md-color-scheme="default"] {
  --md-primary-fg-color: #5b3a2a;
  --md-primary-fg-color--light: #7a5140;
  --md-primary-fg-color--dark: #3e271c;
  --md-accent-fg-color: #9b4fd6;
  --md-typeset-a-color: #b0522a;
}

[data-md-color-scheme="slate"] {
  --md-hue: 265;
  --md-primary-fg-color: #2a1f33;
  --md-primary-fg-color--light: #3a2c46;
  --md-primary-fg-color--dark: #1c1423;
  --md-accent-fg-color: #c58cff;
  --md-typeset-a-color: #f2a36b;
  --md-default-bg-color: #16121b;
  --md-code-bg-color: #211a28;
}

/* Header and tabs: a soft Core-to-Canvas gradient. */
.md-header,
.md-tabs {
  background: linear-gradient(90deg, var(--md-primary-fg-color--dark), var(--md-primary-fg-color) 45%, #4a2d63);
}

/* ---- Home hero ---- */
.ccl-hero {
  text-align: center;
  padding: 2.5rem 1rem 1.5rem;
  margin: -1rem -0.8rem 1.5rem;
  border-radius: 0 0 1.2rem 1.2rem;
  background:
    radial-gradient(60rem 20rem at 20% -10%, rgba(224, 112, 58, 0.22), transparent 60%),
    radial-gradient(60rem 20rem at 80% -10%, rgba(155, 79, 214, 0.22), transparent 60%);
}

.ccl-hero__logos {
  display: flex;
  justify-content: center;
  gap: 1.25rem;
  margin-bottom: 0.5rem;
}

.ccl-hero__logos img {
  width: 128px;
  height: 128px;
  border-radius: 1.4rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  transition: transform 0.25s ease;
}

.ccl-hero__logos img:hover {
  transform: translateY(-4px) rotate(-2deg);
}

.md-typeset .ccl-hero__title {
  font-size: 3rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0.6rem 0 0.2rem;
  background: linear-gradient(90deg, var(--ccl-orange), var(--ccl-purple));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.md-typeset .ccl-hero__title .headerlink {
  display: none;
}

.ccl-hero__tagline {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0.2rem 0 0.4rem;
}

.ccl-hero__lead {
  max-width: 38rem;
  margin: 0 auto 1.2rem !important;
  opacity: 0.85;
}

.ccl-hero .md-button {
  margin: 0.25rem;
}

.ccl-hero__badges {
  margin: 1rem 0 0 !important;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem;
}

/* Cards: lift on hover. */
.md-typeset .grid.cards > ul > li {
  border-radius: 0.8rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.md-typeset .grid.cards > ul > li:hover {
  transform: translateY(-3px);
  border-color: var(--md-accent-fg-color);
}

/* Tables: rounded, with a tinted header. */
.md-typeset table:not([class]) {
  border-radius: 0.6rem;
  overflow: hidden;
}

.md-typeset table:not([class]) th {
  background: color-mix(in srgb, var(--md-accent-fg-color) 12%, transparent);
}

@media screen and (max-width: 44.9375em) {
  .md-typeset .ccl-hero__title { font-size: 2.2rem; }
  .ccl-hero__logos img { width: 88px; height: 88px; }
}

/* Buttons: readable outlines in both schemes, and the brand gradient on the primary one. */
.md-typeset .md-button {
  border-radius: 999px;
  padding: 0.55em 1.4em;
}

[data-md-color-scheme="slate"] .md-typeset .md-button:not(.md-button--primary) {
  color: #e9dcf5;
  border-color: rgba(197, 140, 255, 0.55);
}

.md-typeset .md-button--primary {
  background: linear-gradient(90deg, var(--ccl-orange), var(--ccl-purple));
  border-color: transparent;
  color: #fff;
}

.md-typeset .md-button:hover {
  border-color: var(--md-accent-fg-color);
  box-shadow: 0 6px 18px rgba(155, 79, 214, 0.3);
}

/* The download counters sit on their own row under the version and loader badges. */
.md-typeset .ccl-hero__badges--downloads {
  margin-top: 0.4rem !important;
}