/* ARKONIX brand theme for MkDocs Material.
   Implements the ARKONIX Brand Guide (earn app / @arkonix/brand) —
   semantic tokens §2, typography §3, shape & elevation §5. */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@300;400;500&display=swap");

:root {
  /* Primary palette (Official Brand Kit) */
  --ark-navy: #0b1f33;        /* Midnight Navy */
  --ark-blue: #2c4e6e;        /* Slate Blue */
  --ark-teal: #2fa4a9;        /* Optimized Teal */
  /* Secondary */
  --ark-cloud: #f4f7fb;       /* Cloud White */
  --ark-steel: #8fa1b3;       /* Steel Gray */
  /* Earn extension */
  --ark-navy-light: #143552;  /* card/popover surfaces, dark mode */
  /* Status */
  --ark-warning: #ffb800;
  --ark-error: #e53e3e;
  /* Grayscale ramp points used here */
  --ark-gray-200: #dee2e6;    /* light-mode borders/inputs */
  /* Brand gradient — .gradient-orbital */
  --ark-gradient: linear-gradient(135deg, #2c4e6e 0%, #2fa4a9 100%);
  /* Navy-tinted shadows (§5 — never pure black) */
  --ark-shadow-sm: 0 2px 8px rgba(10, 37, 64, 0.08);
  --ark-shadow: 0 4px 16px rgba(10, 37, 64, 0.12);
  --ark-shadow-lg: 0 8px 32px rgba(10, 37, 64, 0.16);
}

/* ---------- Light theme (§2, light column) ---------- */
body[data-md-color-scheme="default"] {
  --md-primary-fg-color: var(--ark-navy);
  --md-primary-fg-color--light: var(--ark-blue);
  --md-primary-fg-color--dark: #071523;
  --md-accent-fg-color: var(--ark-teal);

  --md-default-bg-color: #ffffff;               /* background */
  --md-default-fg-color: var(--ark-navy);       /* foreground */
  --md-default-fg-color--light: rgba(11, 31, 51, 0.72);
  --md-default-fg-color--lighter: var(--ark-steel); /* muted-foreground */
  --md-default-fg-color--lightest: rgba(143, 161, 179, 0.35);

  --md-typeset-color: var(--ark-navy);
  --md-typeset-a-color: var(--ark-blue);        /* info / links */
  --md-code-bg-color: var(--ark-cloud);         /* muted surface */
  --md-typeset-table-color: var(--ark-gray-200); /* border */

  --md-footer-bg-color: var(--ark-navy);
  --md-footer-bg-color--dark: #071523;
}

/* ---------- Dark theme (§2, dark column) ---------- */
body[data-md-color-scheme="slate"] {
  --md-primary-fg-color: var(--ark-navy);
  --md-primary-fg-color--light: var(--ark-blue);
  --md-primary-fg-color--dark: #071523;
  --md-accent-fg-color: var(--ark-teal);        /* ring → teal in dark */

  --md-default-bg-color: var(--ark-navy);       /* background #0B1F33 */
  --md-default-fg-color: var(--ark-cloud);      /* foreground #F4F7FB */
  --md-default-fg-color--light: rgba(244, 247, 251, 0.72);
  --md-default-fg-color--lighter: var(--ark-steel); /* muted-foreground */
  --md-default-fg-color--lightest: rgba(143, 161, 179, 0.3);

  --md-typeset-color: var(--ark-cloud);
  --md-typeset-a-color: #4db8bd;                /* teal, lifted for AA on navy */
  --md-code-bg-color: var(--ark-navy-light);    /* card surface #143552 */
  --md-code-fg-color: var(--ark-cloud);
  --md-typeset-table-color: rgba(44, 78, 110, 0.75); /* border #2C4E6E */

  --md-footer-bg-color: #071523;
  --md-footer-bg-color--dark: #050f1a;
}


/* ---------- Typography (§3) ----------
   Theme fonts: DM Sans (body) + IBM Plex Mono (code) via mkdocs.yml.
   Headings: Inter. Display/hero: Space Grotesk. */
.md-typeset {
  font-size: 0.8rem;      /* body 16px */
  line-height: 1.7;       /* body line height */
  font-feature-settings: "rlig" 1, "calt" 1;
  -webkit-font-smoothing: antialiased;
}

.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4,
.md-typeset h5,
.md-typeset h6,
.md-header__topic,
.md-tabs__link {
  font-family: "Inter", "DM Sans", -apple-system, system-ui, sans-serif;
}

/* heading-lg: 36px / 1.2 / weight 400 */
.md-typeset h1 {
  font-size: 1.8rem;
  line-height: 1.2;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--md-default-fg-color);
}

/* heading: 24px / 1.3 / weight 500 */
.md-typeset h2 {
  font-size: 1.2rem;
  line-height: 1.3;
  font-weight: 500;
  letter-spacing: 0;
}

/* heading-sm: 20px / 1.4 / weight 500 */
.md-typeset h3 {
  font-size: 1rem;
  line-height: 1.4;
  font-weight: 500;
}

/* Orbital-gradient signature under H1 (135°, blue → teal) */
.md-typeset h1::after {
  content: "";
  display: block;
  width: 2.4rem;
  height: 0.18rem;
  margin-top: 0.45rem;
  border-radius: 999px;
  background: var(--ark-gradient);
}

/* ---------- Header / tabs ----------
   The navbar matches the page background in both themes: white with navy
   text in light mode, navy with cloud text in dark. A hairline separator
   (the scheme's border token) marks it off from content. */
.md-header,
.md-tabs {
  background-color: var(--md-default-bg-color);
  color: var(--md-default-fg-color);
}

.md-tabs {
  border-bottom: 1px solid var(--md-typeset-table-color);
}

/* Tabs are hidden on narrow screens — the separator moves to the header */
@media screen and (max-width: 76.1875em) {
  .md-header {
    border-bottom: 1px solid var(--md-typeset-table-color);
  }
}

/* Search field needs contrast against the now-light header in light mode */
body[data-md-color-scheme="default"] .md-search__form {
  background-color: var(--ark-cloud);
}

body[data-md-color-scheme="default"] .md-search__input::placeholder,
body[data-md-color-scheme="default"] .md-search__icon {
  color: var(--ark-steel);
}

/* Replace the plain-text site title with the ARKØNIX wordmark asset
   (matches the earn app navbar: icon + wordmark, inverted to white on navy).
   Only the first topic is the site title; the second (page title on scroll)
   keeps its text. */
.md-header__title .md-header__topic:first-child {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
  height: 100%;
}

.md-header__title .md-header__topic:first-child .md-ellipsis {
  display: none;
}

.md-header__title .md-header__topic:first-child::before {
  content: "";
  display: block;
  flex-shrink: 0;
  width: 3.4rem;
  height: 0.78rem; /* wordmark aspect ratio 365:84 */
  background: url("../assets/arkonix-wordmark.svg") no-repeat center / contain;
}

/* The wordmark asset is dark — invert to white only on the dark navbar */
body[data-md-color-scheme="slate"]
  .md-header__title
  .md-header__topic:first-child::before {
  filter: brightness(0) invert(1);
}

.md-header__title .md-header__topic:first-child::after {
  content: "DOCS";
  display: block;
  flex-shrink: 0;
  font-family: "IBM Plex Mono", "JetBrains Mono", monospace;
  font-size: 0.55rem;
  line-height: 1;
  letter-spacing: 0.1em;
  color: var(--ark-teal);
  border: 1px solid rgba(47, 164, 169, 0.5);
  border-radius: 999px;
  padding: 0.14rem 0.4rem 0.12rem;
}

.md-tabs__link--active {
  color: var(--ark-teal);
  font-weight: 600;
}

/* ---------- Cards (Material grid cards) — radius-lg 12px, navy shadows ---------- */
.md-typeset .grid.cards > ul > li,
.md-typeset .grid > .card {
  border-radius: 12px;
  border-color: rgba(143, 161, 179, 0.35);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

[data-md-color-scheme="slate"] .md-typeset .grid.cards > ul > li,
[data-md-color-scheme="slate"] .md-typeset .grid > .card {
  background: var(--ark-navy-light);            /* card surface */
  border-color: rgba(44, 78, 110, 0.75);
}

.md-typeset .grid.cards > ul > li:hover {
  border-color: var(--ark-teal);
  box-shadow: var(--ark-shadow);
  transform: translateY(-2px);
}

/* ---------- Home hero (display moment → Space Grotesk, §3) ---------- */
.ark-hero {
  padding: 0.2rem 0 0.6rem;
}

/* display: 48px / 1.1 / weight 300 / −0.02em */
.ark-hero h1 {
  font-family: "Space Grotesk", "Inter", sans-serif;
  font-size: 2.4rem;
  line-height: 1.1;
  font-weight: 300;
  letter-spacing: -0.02em;
}

.ark-hero h1::after {
  display: none !important;
}

.ark-hero p.ark-tagline {
  font-size: 0.9rem;      /* body-lg 18px */
  line-height: 1.7;
  max-width: 75ch;        /* brand max line length */
  color: var(--md-default-fg-color--light);
}

.ark-kicker {
  display: inline-block;
  font-family: "IBM Plex Mono", "JetBrains Mono", monospace;
  font-size: 0.6rem;      /* caption 12px */
  letter-spacing: 0.1em;  /* widest */
  text-transform: uppercase;
  color: var(--ark-teal);
  border: 1px solid rgba(47, 164, 169, 0.4);
  border-radius: 999px;
  padding: 0.18rem 0.7rem;
  margin-bottom: 0.9rem;
}

/* ---------- Status pill for in-progress sections (warning #FFB800) ---------- */
.ark-status {
  display: inline-block;
  font-family: "IBM Plex Mono", "JetBrains Mono", monospace;
  font-size: 0.6rem;
  letter-spacing: 0.05em; /* wider */
  text-transform: uppercase;
  border-radius: 999px;
  padding: 0.15rem 0.6rem;
  margin-left: 0.4rem;
  vertical-align: middle;
  background: rgba(255, 184, 0, 0.14);
  border: 1px solid rgba(255, 184, 0, 0.5);
  color: #8a6400;
}

[data-md-color-scheme="slate"] .ark-status {
  color: var(--ark-warning);
}

/* ---------- Tables — radius 8px, navy header ---------- */
.md-typeset table:not([class]) {
  border-radius: 8px;
  overflow: hidden;
  font-size: 0.7rem;      /* body-sm 14px */
  line-height: 1.6;
  box-shadow: var(--ark-shadow-sm);
}

.md-typeset table:not([class]) th {
  background: var(--ark-navy);
  color: var(--ark-cloud);
  font-family: "Inter", sans-serif;
  font-weight: 600;
}

[data-md-color-scheme="slate"] .md-typeset table:not([class]) th {
  background: var(--ark-navy-light);
}

/* ---------- Data is mono (§6): numeric-ish table cells inherit via
   inline code; give inline code the brand radius ---------- */
.md-typeset code {
  border-radius: 4px;     /* radius-sm */
}

/* ---------- Admonitions — radius 8px, navy-tinted elevation ---------- */
.md-typeset .admonition,
.md-typeset details {
  border-radius: 8px;
  box-shadow: var(--ark-shadow-sm);
}

/* ---------- Footer ---------- */
.md-footer-meta {
  font-size: 0.6rem;
}