/* Akili AI brand palette
 * Source: live akiliai.net production CSS — these are the canonical brand
 * values used across both web properties. Slightly differ from the older
 * brand-guidelines PDF; live-site values win for cross-property consistency.
 *
 *   Navy        #070736   primary  (hsl 240 78% 12%)
 *   Turquoise   #16cac1   accent   (hsl 175 80% 44%)
 *   Green sea   #119c91   accent darker variant
 *   Sunflower   #f4d22a   secondary accent (rare)
 *   Plum        #7a2895   secondary accent (rare)
 *
 * Hairline border colour:
 *   light scheme  hsl(240 20% 90%)  ≈ #e2e2e8
 *   dark scheme   hsl(240 40% 20%)  ≈ #292952
 */

:root,
[data-md-color-scheme="default"] {
  --md-primary-fg-color:        #070736;
  --md-primary-fg-color--light: #1a1a4d;
  --md-primary-fg-color--dark:  #050527;
  --md-primary-bg-color:        #ffffff;
  --md-primary-bg-color--light: rgba(255, 255, 255, 0.7);

  --md-accent-fg-color:             #16cac1;
  --md-accent-fg-color--transparent: rgba(22, 202, 193, 0.10);
  --md-accent-bg-color:             #ffffff;
  --md-accent-bg-color--light:      rgba(255, 255, 255, 0.7);
}

[data-md-color-scheme="slate"] {
  --md-primary-fg-color:        #070736;
  --md-primary-fg-color--light: #1a1a4d;
  --md-primary-fg-color--dark:  #050527;

  --md-accent-fg-color:             #16cac1;
  --md-accent-fg-color--transparent: rgba(22, 202, 193, 0.15);

  /* In dark mode the navy primary lacks contrast against the dark slate
   * background — body links and active nav items in navy are unreadable.
   * Use Turquoise as the readable accent throughout slate, matching the
   * live site's dark-mode treatment (hover:text-turquoise everywhere). */
  --md-typeset-a-color: var(--md-accent-fg-color);
}

/* Active sidebar / TOC nav items in slate — pop with Turquoise instead of
 * inheriting the navy primary that disappears against the dark surface. */
[data-md-color-scheme="slate"] .md-nav__link--active,
[data-md-color-scheme="slate"] .md-nav__item--active > .md-nav__link {
  color: var(--md-accent-fg-color);
}

/* Header logo sizing.
 * The white wordmark has a wide ~3.45:1 aspect ratio. Material's default
 * forces the logo to a 1.2rem × 1.2rem square which crushes the wordmark.
 * Override to let it grow horizontally with a taller height for legibility. */
.md-header__button.md-logo img,
.md-header__button.md-logo svg {
  width:  auto;
  height: 1.5rem;
}

/* Search bar contrast on deep navy header.
 * Material's defaults assume a mid-tone primary so the input "lightens"
 * naturally; with #070736 that lift gets lost and the search input blends
 * into the header. Explicit overrides keep it readable. */
.md-search__form {
  background-color: rgba(255, 255, 255, 0.12);
}
.md-search__form:hover {
  background-color: rgba(255, 255, 255, 0.18);
}
.md-search__input {
  color: #ffffff;
}
.md-search__input::placeholder {
  color: rgba(255, 255, 255, 0.7);
}
.md-search__icon {
  color: rgba(255, 255, 255, 0.85);
}
/* When the search overlay is open and shows results, the input sits on a
 * light surface — restore default text colour so typed input stays readable. */
[data-md-toggle="search"]:checked ~ .md-header .md-search__input {
  color: var(--md-default-fg-color);
}


/* ============================================================
 * Polish pass — patterns ported from the live akiliai.net site
 * ============================================================ */

/* Buttons.
 * Live site: CTA buttons are pill-shaped with a subtle Turquoise glow
 * + 2px lift on hover. Transition is 300ms ease across the codebase. */
.md-typeset .md-button {
  border-radius: 9999px;
  transition: transform 300ms ease, box-shadow 300ms ease,
              background-color 300ms ease, color 300ms ease;
}
.md-typeset .md-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(22, 202, 193, 0.25);
}
.md-typeset .md-button--primary:hover {
  box-shadow: 0 10px 24px rgba(22, 202, 193, 0.35);
}
/* Outlined (non-primary) button in slate — navy border + navy text are both
 * invisible on the dark surface. Recolour to Turquoise so the outline pops
 * while still hovering to filled-Turquoise per Material's default behaviour. */
[data-md-color-scheme="slate"] .md-typeset .md-button:not(.md-button--primary) {
  color: var(--md-accent-fg-color);
  border-color: var(--md-accent-fg-color);
}
/* When the same button is hovered or focused, Material fills the bg with
 * Turquoise — the text needs to flip to white so it doesn't blend in. */
[data-md-color-scheme="slate"] .md-typeset .md-button:not(.md-button--primary):hover,
[data-md-color-scheme="slate"] .md-typeset .md-button:not(.md-button--primary):focus {
  color: var(--md-accent-bg-color);
}

/* Blockquotes.
 * Live site has none, but the in-site callout pattern uses a Turquoise
 * left treatment, so let blockquotes share that brand voice. */
.md-typeset blockquote {
  border-left-color: var(--md-accent-fg-color);
}

/* Admonitions / details — bigger radius to match the live site's
 * `rounded-xl` (12px) callout treatment. Material default is ~2px.
 * `overflow: hidden` clips the coloured title bar to the rounded outer
 * corners — without it the title paints past the radius. */
.md-typeset .admonition,
.md-typeset details {
  border-radius: 0.75rem;
  overflow: hidden;
}

/* Tables.
 * Live `Table` component uses no header background, no row striping,
 * just a subtle hover. Mirror that: a faint navy/5 row hover. */
.md-typeset table:not([class]) tbody tr {
  transition: background-color 200ms ease;
}
.md-typeset table:not([class]) tbody tr:hover {
  background-color: rgba(7, 7, 54, 0.04);
}
/* Table row hover in slate — use a white tint so the hover is visible
 * against the dark surface (the navy/4% above is invisible in dark). */
[data-md-color-scheme="slate"] .md-typeset table:not([class]) tbody tr:hover {
  background-color: rgba(255, 255, 255, 0.04);
}

/* Horizontal rules — match the live site's hairline border colour. */
.md-typeset hr {
  border-color: hsl(240 20% 90%);
}
[data-md-color-scheme="slate"] .md-typeset hr {
  border-color: hsl(240 40% 20%);
}

/* Inline code — subtle Turquoise tint to keep the brand voice
 * consistent without making code blocks themselves loud. */
.md-typeset code:not(.md-code__content) {
  background-color: rgba(22, 202, 193, 0.08);
  border-radius: 0.25rem;
}

/* Active top-nav tab — Turquoise dot indicator below the active item,
 * matching the floating-pill nav on akiliai.net. (Pure CSS — no template
 * override needed; the dot is added via ::after on the active link.) */
.md-tabs__item--active .md-tabs__link,
.md-tabs__link--active {
  position: relative;
}
.md-tabs__item--active .md-tabs__link::after,
.md-tabs__link--active::after {
  content: "";
  position: absolute;
  bottom: -0.35rem;
  left: 50%;
  transform: translateX(-50%);
  width: 0.3rem;
  height: 0.3rem;
  border-radius: 9999px;
  background-color: var(--md-accent-fg-color);
}

/* Selection — subtle Turquoise tint to match the brand. */
::selection {
  background-color: rgba(22, 202, 193, 0.25);
}