/* ============================================================================
   Figestió Platform Docs — brand theme
   Palette (from the logo):  teal #74b2b1 · green #97ba63 · near-black #211915
   Strategy: restrained — warm tinted neutrals + a teal accent, green used sparingly.
   Colours are authored in OKLCH so neutrals stay tinted toward the brand hue.
   ========================================================================= */

:root {
  /* Brand anchors */
  --fi-teal:        oklch(72% 0.045 192);
  --fi-teal-deep:   oklch(52% 0.072 192);
  --fi-teal-bright: oklch(82% 0.052 192);
  --fi-green:       oklch(75% 0.105 128);
  --fi-green-deep:  oklch(58% 0.105 128);
  --fi-ink:         oklch(21% 0.012 64);

  /* Diagram "figure card" tints — kept constant across light/dark (see Mermaid) */
  --fi-fig-bg:      oklch(98.4% 0.004 190);
  --fi-fig-border:  oklch(88% 0.012 190);

  --fi-font-text: "Inter", system-ui, -apple-system, sans-serif;

  /* Type scale (~1.2 minor-third), driven off a 16px base */
  --fi-h1: 2.15rem;
  --fi-h2: 1.62rem;
  --fi-h3: 1.28rem;
  --fi-h4: 1.06rem;
}

/* ---------------------------------------------------------------------------
   Light scheme
   --------------------------------------------------------------------------- */
[data-md-color-scheme="default"] {
  --md-primary-fg-color:        var(--fi-ink);
  --md-primary-fg-color--light: oklch(30% 0.013 64);
  --md-primary-fg-color--dark:  oklch(16% 0.010 64);
  --md-primary-bg-color:        oklch(97% 0.006 190);
  --md-primary-bg-color--light: oklch(90% 0.006 190);

  --md-accent-fg-color:         var(--fi-teal-deep);

  --md-default-bg-color:        oklch(99.2% 0.003 95);
  --md-typeset-color:           oklch(29% 0.012 64);
  --md-typeset-a-color:         var(--fi-teal-deep);

  --md-code-bg-color:           oklch(96.6% 0.006 190);
  --md-code-fg-color:           oklch(34% 0.013 64);

  --md-typeset-mark-color:      oklch(90% 0.10 128 / 0.55);
  --fi-rule:                    oklch(90% 0.008 190);
  --fi-surface:                 oklch(98.6% 0.004 190);
}

/* ---------------------------------------------------------------------------
   Dark scheme (warmed away from Material's default blue-grey, toward the ink)
   --------------------------------------------------------------------------- */
[data-md-color-scheme="slate"] {
  --md-hue: 220;
  --md-primary-fg-color:        oklch(17% 0.010 64);
  --md-primary-bg-color:        oklch(92% 0.010 190);

  --md-accent-fg-color:         var(--fi-teal-bright);

  --md-default-bg-color:        oklch(17.5% 0.008 70);
  --md-default-fg-color:        oklch(92% 0.006 90);
  --md-typeset-color:           oklch(88% 0.008 90);
  --md-typeset-a-color:         var(--fi-teal-bright);

  --md-code-bg-color:           oklch(22% 0.009 70);
  --md-code-fg-color:           oklch(86% 0.010 95);

  --md-default-fg-color--light:   oklch(75% 0.008 90);
  --md-default-fg-color--lighter: oklch(45% 0.008 90);
  --md-default-fg-color--lightest:oklch(30% 0.008 90);

  --md-typeset-mark-color:      oklch(62% 0.10 128 / 0.40);
  --fi-rule:                    oklch(32% 0.010 90);
  --fi-surface:                 oklch(21% 0.009 70);
}

/* ---------------------------------------------------------------------------
   Typography
   --------------------------------------------------------------------------- */
.md-typeset {
  font-feature-settings: "kern", "liga", "calt";
  line-height: 1.66;
  font-size: 0.82rem;
}

.md-typeset h1 {
  font-size: var(--fi-h1);
  font-weight: 760;
  letter-spacing: -0.02em;
  line-height: 1.12;
  color: var(--md-typeset-color);
  margin-bottom: 0.7em;
}

.md-typeset h2 {
  font-size: var(--fi-h2);
  font-weight: 700;
  letter-spacing: -0.012em;
  line-height: 1.2;
  margin-top: 2.4em;
  padding-bottom: 0.3em;
  border-bottom: 1px solid var(--fi-rule);
}

.md-typeset h3 {
  font-size: var(--fi-h3);
  font-weight: 660;
  letter-spacing: -0.008em;
  margin-top: 1.9em;
}

/* The `#### Term` style used as definition headings in the glossary / gotchas */
.md-typeset h4 {
  font-size: var(--fi-h4);
  font-weight: 680;
  letter-spacing: -0.004em;
  margin-top: 1.7em;
  color: var(--md-typeset-color);
}

.md-typeset p,
.md-typeset li {
  max-width: 72ch;
}

/* Keep tables, diagrams and admonitions full-width (the 72ch cap is body-prose only) */
.md-typeset table,
.md-typeset .mermaid,
.md-typeset .admonition,
.md-typeset .tabbed-set,
.md-typeset .grid {
  max-width: none;
}

/* ---------------------------------------------------------------------------
   Links
   --------------------------------------------------------------------------- */
.md-typeset a {
  text-decoration-color: color-mix(in oklch, currentColor 30%, transparent);
  text-underline-offset: 0.16em;
  transition: color 120ms ease, text-decoration-color 120ms ease;
}
.md-typeset a:hover {
  color: var(--md-accent-fg-color);
  text-decoration-color: currentColor;
}

/* ---------------------------------------------------------------------------
   Header & navigation
   --------------------------------------------------------------------------- */
.md-header {
  box-shadow: 0 1px 0 oklch(0% 0 0 / 0.06);
}
.md-tabs {
  border-bottom: 1px solid oklch(100% 0 0 / 0.08);
}

/* Active nav item: a teal cue instead of the default bold-only treatment */
.md-nav__link--active,
.md-nav__item .md-nav__link--active {
  color: var(--md-accent-fg-color);
  font-weight: 650;
}
.md-nav__item--section > .md-nav__link {
  font-weight: 700;
  letter-spacing: 0.01em;
  opacity: 0.72;
  text-transform: uppercase;
  font-size: 0.66rem;
}

/* TOC active marker */
.md-nav--secondary .md-nav__link--active {
  color: var(--md-accent-fg-color);
}

/* ---------------------------------------------------------------------------
   Code
   --------------------------------------------------------------------------- */
.md-typeset code {
  border-radius: 0.28rem;
  padding: 0.12em 0.36em;
  font-size: 0.84em;
  border: 1px solid color-mix(in oklch, var(--md-code-fg-color) 12%, transparent);
}
.md-typeset pre > code {
  border: none;
}
.md-typeset .highlight > pre > code,
.md-typeset pre {
  border-radius: 0.55rem;
}
.md-typeset .highlight {
  box-shadow: 0 1px 2px oklch(0% 0 0 / 0.05);
  border-radius: 0.55rem;
  border: 1px solid var(--fi-rule);
}

/* ---------------------------------------------------------------------------
   Tables — quiet rules, comfortable padding, tinted header
   --------------------------------------------------------------------------- */
.md-typeset table:not([class]) {
  border: 1px solid var(--fi-rule);
  border-radius: 0.55rem;
  overflow: hidden;
  font-size: 0.78rem;
}
.md-typeset table:not([class]) th {
  background: var(--fi-surface);
  font-weight: 680;
  letter-spacing: 0.005em;
  border-bottom: 1px solid var(--fi-rule);
}
.md-typeset table:not([class]) th,
.md-typeset table:not([class]) td {
  padding: 0.55rem 0.85rem;
  border-top: 1px solid var(--fi-rule);
}
.md-typeset table:not([class]) tr:hover td {
  background: color-mix(in oklch, var(--fi-teal) 7%, transparent);
}

/* ---------------------------------------------------------------------------
   Admonitions — soften Material's defaults, brand the common types
   --------------------------------------------------------------------------- */
.md-typeset .admonition,
.md-typeset details {
  border-radius: 0.55rem;
  border-width: 1px;
  font-size: 0.78rem;
  box-shadow: 0 1px 2px oklch(0% 0 0 / 0.04);
}
.md-typeset .admonition-title,
.md-typeset summary {
  font-weight: 680;
  letter-spacing: 0.003em;
}
/* Note / info / tip lean on the brand teal */
.md-typeset .admonition.note,
.md-typeset .admonition.info {
  border-color: color-mix(in oklch, var(--fi-teal) 45%, transparent);
}
.md-typeset .note > .admonition-title,
.md-typeset .info > .admonition-title {
  background: color-mix(in oklch, var(--fi-teal) 14%, transparent);
}
.md-typeset .admonition.tip,
.md-typeset .admonition.success {
  border-color: color-mix(in oklch, var(--fi-green) 45%, transparent);
}
.md-typeset .tip > .admonition-title,
.md-typeset .success > .admonition-title {
  background: color-mix(in oklch, var(--fi-green) 16%, transparent);
}

/* ---------------------------------------------------------------------------
   Grid cards (home page)
   --------------------------------------------------------------------------- */
.md-typeset .grid.cards > ul > li {
  border-radius: 0.7rem;
  border: 1px solid var(--fi-rule);
  padding: 1.05rem 1.15rem;
  transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}
.md-typeset .grid.cards > ul > li:hover {
  border-color: color-mix(in oklch, var(--fi-teal) 55%, transparent);
  box-shadow: 0 6px 20px oklch(0% 0 0 / 0.07);
  transform: translateY(-2px);
}
.md-typeset .grid.cards .lg.middle svg {
  fill: var(--fi-teal-deep);
}
[data-md-color-scheme="slate"] .md-typeset .grid.cards .lg.middle svg {
  fill: var(--fi-teal-bright);
}

/* ---------------------------------------------------------------------------
   Roadmap status icons (integration.md)
   --------------------------------------------------------------------------- */
.md-typeset .status-done svg  { fill: var(--fi-green-deep); }
.md-typeset .status-wip svg   { fill: oklch(70% 0.13 75); }   /* amber */
.md-typeset .status-todo svg  { fill: var(--md-default-fg-color--lighter); }
[data-md-color-scheme="slate"] .md-typeset .status-done svg { fill: var(--fi-green); }

/* ---------------------------------------------------------------------------
   Mermaid diagrams
   Rendered on a fixed light "figure card" in BOTH light and dark mode, so the
   per-diagram %%{init}%% brand palette (dark ink text on light brand tints) stays
   legible everywhere. The card reads as an intentional figure on the dark page.
   --------------------------------------------------------------------------- */
.md-typeset .mermaid {
  background: var(--fi-fig-bg);
  border: 1px solid var(--fi-fig-border);
  border-radius: 0.7rem;
  margin: 1.8rem auto;
  padding: 1.4rem 1.2rem 1.1rem;
  line-height: 1.4;
  overflow-x: auto;
  box-shadow: 0 1px 2px oklch(0% 0 0 / 0.05);
}
[data-md-color-scheme="slate"] .md-typeset .mermaid {
  box-shadow: 0 2px 14px oklch(0% 0 0 / 0.35);
  border-color: oklch(82% 0.012 190);
}
.md-typeset .mermaid svg {
  max-width: 100%;
  height: auto;
}

/* ---------------------------------------------------------------------------
   Misc
   --------------------------------------------------------------------------- */
/* Wider content column for diagram- and table-heavy pages */
.md-grid {
  max-width: 64rem;
}
/* Small captions used under figures (e.g. footnote-style notes) */
.md-typeset small {
  color: var(--md-default-fg-color--light);
}
/* Footnote back-refs and permalinks pick up the accent on hover */
.md-typeset .headerlink:hover {
  color: var(--md-accent-fg-color);
}