/* Canima brand tokens — a single cyan accent over neutral surfaces.
   Values mirror CANIMA-BRAND-GUIDE.md in the product repo. */
:root {
  --canima-cyan: #00d4ff;        /* bright brand accent — for dark surfaces  */
  --canima-cyan-hover: #22dfff;
  --canima-cyan-dim: #0891b2;    /* readable cyan for light surfaces         */
  --canima-navy: #0a0f1c;        /* --bg */
}

/* ======================================================= Brand font ======= */
/* Korataki — the Canima logo typeface (Typodermic). Self-hosted; used ONLY for
   the "CANIMA" header wordmark, not body text. */
@font-face {
  font-family: "Korataki";
  src: url("../assets/fonts/korataki.woff2") format("woff2"),
       url("../assets/fonts/korataki.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ============================================================= Accent ===== */
/* Links, focus rings, active nav item, tab underline. */
[data-md-color-accent="cyan"] {
  --md-accent-fg-color: var(--canima-cyan);
  --md-accent-fg-color--transparent: rgba(0, 212, 255, 0.1);
}

/* ================================================ LIGHT scheme (default) === */
/* Airy and high-contrast; cyan dimmed so links/active states stay readable. */
[data-md-color-scheme="default"] {
  --md-accent-fg-color: var(--canima-cyan-dim);
  --md-typeset-a-color: var(--canima-cyan-dim);
}

/* Light header + top tab bar: near-white with a hairline rule. */
[data-md-color-primary="white"] .md-header,
[data-md-color-primary="white"] .md-tabs {
  background-color: #f5f7fa;
  color: var(--canima-navy);
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}
[data-md-color-primary="white"] .md-tabs__link {
  color: var(--canima-navy);
  opacity: 0.72;
}
[data-md-color-primary="white"] .md-tabs__link--active,
[data-md-color-primary="white"] .md-tabs__link:hover {
  opacity: 1;
  color: var(--canima-navy);
}

/* ================================================== DARK scheme (brand) === */
/* Deep-navy surfaces + bright cyan, with brighter body text for readability. */
[data-md-color-scheme="slate"] {
  --md-default-bg-color: #0a0f1c;
  --md-default-fg-color: #eef2f8;            /* body text — bright             */
  --md-default-fg-color--light: #d3dbe8;     /* headings / secondary emphasis  */
  --md-default-fg-color--lighter: #aab6c6;   /* captions, muted metadata       */
  --md-default-fg-color--lightest: #6b7688;  /* faint dividers/placeholders    */
  --md-typeset-color: #eef2f8;
  --md-code-bg-color: #0d1424;
  --md-code-fg-color: #dbe4f0;
  --md-typeset-a-color: var(--canima-cyan);
}
[data-md-color-scheme="slate"] .md-typeset a:hover { color: var(--canima-cyan-hover); }
[data-md-color-scheme="slate"] .md-tabs { background-color: #0a0f1c; }
[data-md-color-primary="black"] {
  --md-primary-fg-color: #0a0f1c;
  --md-primary-bg-color: #ffffff;
}

/* ===================================================== Typography ========= */
/* Generous size and leading for the spacious, readable docs feel. */
.md-typeset {
  font-size: 0.85rem;
  line-height: 1.7;
}
.md-typeset h1 {
  font-weight: 800;
  letter-spacing: -0.01em;
}

/* ============================================ Header brand ("CANIMA Docs") = */
/* site_name is "CANIMA"; "Docs" is appended in the accent color so the brand
   name stays clean in <title>. Only the first header topic (site name) is
   styled — the on-scroll page-title topic is left alone. */
.md-header__ellipsis .md-header__topic:first-child .md-ellipsis {
  font-family: "Korataki", var(--md-text-font-family, "Inter"), sans-serif;
  font-weight: 400;         /* Korataki is single-weight; avoid faux bold */
  letter-spacing: 0.02em;
}
.md-header__ellipsis .md-header__topic:first-child .md-ellipsis::after {
  content: " Docs";
  /* keep "Docs" in the UI sans, not the Korataki wordmark face */
  font-family: var(--md-text-font-family, "Inter"), sans-serif;
  font-weight: 500;   /* a quiet descriptor next to the CANIMA wordmark */
}
[data-md-color-scheme="default"]
  .md-header__ellipsis .md-header__topic:first-child .md-ellipsis::after {
  color: #64748b;     /* muted slate — deliberately NOT the cyan accent */
}
[data-md-color-scheme="slate"]
  .md-header__ellipsis .md-header__topic:first-child .md-ellipsis::after {
  color: #9aa7b8;
}

/* =================================================== Screenshots ========== */
/* Subtle framing for when UI captures are added back. */
.md-typeset img {
  border-radius: 6px;
  border: 1px solid rgba(148, 163, 184, 0.2);
}

/* ==================================================== Breadcrumbs ========= */
/* Rendered above each article's H1 (overrides/partials/breadcrumbs.html) — good
   for orientation and for SEO. .md-path isn't in the community build, so we
   style our own. */
.canima-breadcrumbs {
  margin: 0 0 0.7rem;
  font-size: 0.68rem;
  line-height: 1.4;
}
/* .md-typeset prefix so these beat Material's list rules
   (.md-typeset ol:not([hidden]){display:flow-root} + li margins). */
.md-typeset .canima-breadcrumbs ol {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  gap: 0.3rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.md-typeset .canima-breadcrumbs li {
  display: inline-flex;
  align-items: center;
  margin: 0;
}
.canima-breadcrumbs li:not(:first-child)::before {
  content: "›";
  margin-right: 0.3rem;
  opacity: 0.45;
}
.canima-breadcrumbs a {
  color: var(--md-typeset-a-color);
  text-decoration: none;
}
.canima-breadcrumbs a:hover { text-decoration: underline; }
.canima-breadcrumbs [aria-current="page"] {
  color: var(--md-default-fg-color--light);
}

/* ==================================================== Grid cards ========== */
/* Material's built-in .grid.cards, tuned: cyan icons + a subtle hover lift. */
.md-typeset .grid.cards > ul > li,
.md-typeset .grid > .card {
  border-radius: 0.5rem;
  transition: border-color 125ms, box-shadow 125ms, transform 125ms;
}
.md-typeset .grid.cards > ul > li:hover {
  border-color: var(--md-accent-fg-color);
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
  transform: translateY(-2px);
}
.md-typeset .grid.cards .twemoji,
.md-typeset .grid.cards .lg {
  color: var(--md-accent-fg-color);
}

/* ================================================= Header logo size ======= */
/* Enlarge the Canima icon in the header (Material's default is ~1.2rem). */
.md-header__button.md-logo img,
.md-header__button.md-logo svg {
  height: 1.9rem;
  width: auto;
}