/* ============================================================
   Huang Lab Spatial Workshop — "Atlas" theme
   Warm-paper editorial: Fraunces display serif + Hanken Grotesk,
   ink on paper, a single restrained terracotta accent.
   Self-hosted variable fonts (no Google Fonts CDN dependency).
   ============================================================ */

/* ---------- Self-hosted variable fonts ---------- */
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../assets/fonts/fraunces-latin-wght-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Fraunces";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("../assets/fonts/fraunces-latin-wght-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../assets/fonts/hanken-grotesk-latin-wght-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Hanken Grotesk";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("../assets/fonts/hanken-grotesk-latin-wght-italic.woff2") format("woff2");
}

/* ---------- Type + radius tokens ---------- */
:root {
  --md-text-font: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI",
    "Noto Sans SC", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
  --md-code-font: "Cascadia Code", "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --r: 6px;
  --r-sm: 4px;
}

/* ============================================================
   COLOR PALETTE
   ============================================================ */
:root,
[data-md-color-scheme="default"] {
  /* Material overrides */
  --md-default-bg-color: #FAF7F1;           /* warm paper */
  --md-default-fg-color: #2A231C;
  --md-default-fg-color--light: #6E6256;
  --md-default-fg-color--lighter: rgba(42, 35, 28, 0.36);
  --md-default-fg-color--lightest: #E7DFD0;  /* hairlines */
  --md-primary-fg-color: #2A231C;            /* ink (used by selected states) */
  --md-primary-fg-color--light: #4A4036;
  --md-primary-fg-color--dark: #1B150F;
  --md-primary-bg-color: #FAF7F1;
  --md-primary-bg-color--light: rgba(250, 247, 241, 0.7);
  --md-accent-fg-color: #A8432A;             /* terracotta */
  --md-accent-fg-color--transparent: rgba(168, 67, 42, 0.1);
  --md-typeset-a-color: #A8432A;
  --md-code-bg-color: #F2EADC;
  --md-code-fg-color: #4A4036;

  /* Custom */
  --paper: #FAF7F1;
  --surface: #FFFDF9;
  --ink: #2A231C;
  --ink-2: #5C5246;
  --muted: #8A7E70;
  --line: #E7DFD0;
  --line-2: #D9CEBB;
  --accent: #A8432A;
  --accent-ink: #7E2F1C;
  --accent-soft: #F3E6DE;
  --card-shadow: 0 1px 2px rgba(60, 42, 24, 0.05);
  --card-shadow-hover: 0 22px 44px -28px rgba(60, 42, 24, 0.45);
}

[data-md-color-scheme="slate"] {
  --md-default-bg-color: #1A1612;            /* warm near-black */
  --md-default-fg-color: #ECE3D6;
  --md-default-fg-color--light: #B6A998;
  --md-default-fg-color--lighter: rgba(236, 227, 214, 0.4);
  --md-default-fg-color--lightest: #322B23;
  --md-primary-fg-color: #ECE3D6;
  --md-primary-fg-color--light: #C9BCA9;
  --md-primary-fg-color--dark: #0F0C09;
  --md-primary-bg-color: #1A1612;
  --md-accent-fg-color: #DD7E60;
  --md-accent-fg-color--transparent: rgba(221, 126, 96, 0.14);
  --md-typeset-a-color: #E08A6A;
  --md-code-bg-color: #221C16;
  --md-code-fg-color: #D8CBB8;

  --paper: #1A1612;
  --surface: #221C16;
  --ink: #ECE3D6;
  --ink-2: #B6A998;
  --muted: #8C8072;
  --line: #322B23;
  --line-2: #43392E;
  --accent: #DD7E60;
  --accent-ink: #E8A084;
  --accent-soft: rgba(221, 126, 96, 0.12);
  --card-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  --card-shadow-hover: 0 22px 44px -26px rgba(0, 0, 0, 0.6);
}

/* Material ships a higher-specificity slate link color
   ([data-md-color-scheme=slate][data-md-color-primary=teal] -> #00ccb8).
   Match its specificity to keep dark-mode links terracotta. */
[data-md-color-scheme="slate"][data-md-color-primary] {
  --md-typeset-a-color: #E08A6A;
}

/* ============================================================
   BASE TYPOGRAPHY
   ============================================================ */
body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.md-typeset {
  font-size: 0.8rem;
  line-height: 1.65;
}

.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4 {
  font-family: var(--serif);
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.012em;
}

.md-typeset h1 {
  font-weight: 600;
  font-size: 2.1rem;
  line-height: 1.12;
  margin-bottom: 1rem;
}

.md-typeset h2 {
  font-size: 1.55rem;
  margin-top: 2.4rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--line);
}

.md-typeset h3 {
  font-size: 1.22rem;
  margin-top: 1.6rem;
}

.md-typeset a {
  text-decoration-color: var(--accent-soft);
  text-underline-offset: 0.15em;
  transition: color 0.15s;
}
.md-typeset a:hover {
  color: var(--accent-ink);
}

/* ============================================================
   HEADER + TABS (paper, ink, hairline — not a colored bar)
   ============================================================ */
.md-header {
  background-color: var(--paper);
  color: var(--ink);
  box-shadow: none;
  border-bottom: 1px solid var(--line);
}
.md-header--shadow {
  box-shadow: none;
}
.md-header__title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
}
.md-header__topic .md-ellipsis {
  font-family: var(--serif);
}
.md-header__button.md-logo {
  color: var(--accent);              /* terracotta brand mark */
}

.md-tabs {
  background-color: var(--paper);
  color: var(--ink);
  border-bottom: 1px solid var(--line);
}
.md-tabs__link {
  font-size: 0.76rem;
  opacity: 0.72;
  transition: opacity 0.15s, color 0.15s;
}
.md-tabs__link:hover,
.md-tabs__link--active {
  opacity: 1;
  color: var(--accent);
}

/* Search field — warm surface */
.md-search__form {
  background-color: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  box-shadow: none;
}
.md-search__form:hover {
  background-color: var(--surface);
  border-color: var(--accent);
}
[data-md-toggle="search"]:checked ~ .md-header .md-search__form {
  border-radius: var(--r) var(--r) 0 0;
}
.md-search__input {
  color: var(--ink);
}
.md-search__input::placeholder {
  color: var(--muted);
}

/* ============================================================
   HERO (editorial, left-aligned, no gradient/grain)
   ============================================================ */
.hero {
  padding: 3.4rem 0 2rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--line);
  max-width: 52rem;
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}
.hero-eyebrow::before {
  content: "";
  width: 1.9rem;
  height: 1px;
  background: var(--accent);
}

.hero h1 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(2.3rem, 4.6vw, 3.4rem);
  line-height: 1.06;
  letter-spacing: -0.018em;
  margin: 1rem 0 0;
  max-width: 18ch;
}
.hero h1 em {
  font-style: italic;
  color: var(--accent);
}

.hero .hero-lead {
  font-size: 1.12rem;
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 44ch;
  margin: 1.1rem 0 0;
}
.hero .hero-lead strong {
  color: var(--ink);
  font-weight: 600;
}

.hero .md-button {
  margin: 1.6rem 0.6rem 0 0;
}

/* Optional brand subline kept subtle */
.hero-subtitle {
  display: block;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-top: 0.4rem;
}

/* ============================================================
   STATS — ruled editorial row
   ============================================================ */
.stats-bar {
  display: flex;
  gap: 0;
  margin: 2.4rem 0 0;
  flex-wrap: wrap;
}
.stats-bar > p {            /* md_in_html wraps the inline spans in a <p> */
  display: contents;
}
.stats-bar .stat {
  display: flex;
  flex-direction: column;
  padding-right: 1.8rem;
  margin-right: 1.8rem;
  border-right: 1px solid var(--line);
}
.stats-bar .stat:last-child {
  border-right: none;
  margin-right: 0;
}
.stats-bar .stat-value {
  display: block;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.9rem;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.stats-bar .stat-label {
  display: block;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 0.5rem;
  font-weight: 600;
}

/* ============================================================
   SECTION HEADERS (left-aligned, serif, small accent tick)
   ============================================================ */
.section-header {
  text-align: left;
  margin: 3.2rem 0 1.5rem;
}
.section-header h2 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.7rem;
  border-bottom: none !important;
  padding-bottom: 0 !important;
  margin: 0;
}
.section-header p {
  color: var(--muted);
  font-size: 0.92rem;
  margin-top: 0.35rem;
}

/* ============================================================
   GRID CARDS (clean plates, terracotta hover edge)
   ============================================================ */
.md-typeset .grid.cards > ul > li,
.md-typeset .grid.cards > ol > li {
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 1.6rem 1.5rem;
  background: var(--surface);
  box-shadow: var(--card-shadow);
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
  position: relative;
  overflow: hidden;
}
.md-typeset .grid.cards > ul > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.28s ease;
}
.md-typeset .grid.cards > ul > li:hover {
  transform: translateY(-4px);
  box-shadow: var(--card-shadow-hover);
  border-color: var(--line-2);
}
.md-typeset .grid.cards > ul > li:hover::before {
  transform: scaleY(1);
}
.md-typeset .grid.cards > ul > li > :first-child {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.18rem;
}
.md-typeset .grid.cards .twemoji,
.md-typeset .grid.cards .twemoji svg {
  height: 1.4rem;
  width: 1.4rem;
  fill: var(--accent);
}

/* ============================================================
   BUTTONS (crisp, small radius)
   ============================================================ */
.md-typeset .md-button {
  border-radius: var(--r-sm);
  border-width: 1px;
  font-weight: 600;
  font-size: 0.78rem;
  padding: 0.5em 1.2em;
  transition: transform 0.15s ease, background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.md-typeset .md-button--primary {
  background-color: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}
.md-typeset .md-button--primary:hover {
  background-color: var(--accent);
  border-color: var(--accent);
  color: #fff;
  transform: translateY(-2px);
}
.md-typeset .md-button:not(.md-button--primary) {
  color: var(--ink);
  border-color: var(--line-2);
  background: var(--surface);
}
.md-typeset .md-button:not(.md-button--primary):hover {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-soft);
  transform: translateY(-2px);
}

/* ============================================================
   ADMONITIONS / DETAILS — warm, earthy, hairline
   Muted, low-saturation accents so nothing clashes with paper.
   Color is driven by a single --adm var per type.
   ============================================================ */
.md-typeset .admonition,
.md-typeset details {
  --adm: #9C8E7E;                      /* default / untyped — warm taupe */
  --adm-bg: rgba(156, 142, 126, 0.10);
  border: 1px solid var(--line);
  border-left: 3px solid var(--adm);
  border-radius: var(--r);
  background: var(--surface);
  box-shadow: var(--card-shadow);
  font-size: 0.76rem;
}
/* Material colors per-type borders at (0,3,0), e.g.
   `.md-typeset .admonition.tip{border-color:#00bfa5}` (teal). Match that
   specificity with [class] so the WHOLE border follows our palette. */
.md-typeset .admonition[class],
.md-typeset details[class] {
  border-color: var(--line);
  border-left-color: var(--adm);
}

.md-typeset .admonition > .admonition-title,
.md-typeset details > summary {
  background: var(--adm-bg);
  font-weight: 600;
}
.md-typeset .admonition > .admonition-title::before,
.md-typeset details > summary::before {
  background-color: var(--adm);        /* recolor the type icon (mask unchanged) */
}

/* Per-type earthy accents */
.md-typeset .note, .md-typeset details.note,
.md-typeset .info, .md-typeset details.info,
.md-typeset .todo, .md-typeset details.todo {
  --adm: #5B7488; --adm-bg: rgba(91, 116, 136, 0.12);
}
.md-typeset .tip, .md-typeset details.tip,
.md-typeset .hint, .md-typeset details.hint,
.md-typeset .important, .md-typeset details.important,
.md-typeset .success, .md-typeset details.success,
.md-typeset .check, .md-typeset details.check {
  --adm: #A8432A; --adm-bg: rgba(168, 67, 42, 0.10);   /* terracotta, not green */
}
.md-typeset .question, .md-typeset details.question,
.md-typeset .help, .md-typeset details.help,
.md-typeset .faq, .md-typeset details.faq {
  --adm: #8A6D3B; --adm-bg: rgba(138, 109, 59, 0.12);
}
.md-typeset .warning, .md-typeset details.warning,
.md-typeset .caution, .md-typeset details.caution,
.md-typeset .attention, .md-typeset details.attention {
  --adm: #B5832F; --adm-bg: rgba(181, 131, 47, 0.13);
}
.md-typeset .failure, .md-typeset details.failure,
.md-typeset .danger, .md-typeset details.danger,
.md-typeset .error, .md-typeset details.error,
.md-typeset .bug, .md-typeset details.bug {
  --adm: #8E2A1C; --adm-bg: rgba(142, 42, 28, 0.13);   /* deeper red, distinct from tip */
}
.md-typeset .example, .md-typeset details.example {
  --adm: #735B86; --adm-bg: rgba(115, 91, 134, 0.12);
}
.md-typeset .quote, .md-typeset details.quote,
.md-typeset .cite, .md-typeset details.cite {
  --adm: #8A7E70; --adm-bg: rgba(138, 126, 112, 0.12);
}

/* Functional export accordions: plain warm panels, NOT admonitions
   (export.js emits untyped <details>, which would otherwise inherit
   the default admonition border + pencil icon). */
.md-typeset details.export-downloads-group,
.md-typeset .export-available details {
  border: 1px solid var(--line);
  border-left: 1px solid var(--line);
  box-shadow: none;
  --adm-bg: transparent;
}
.md-typeset details.export-downloads-group > summary::before,
.md-typeset .export-available details > summary::before {
  display: none;
}

/* ============================================================
   TABLES (clean, warm header row)
   ============================================================ */
.md-typeset table:not([class]) {
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: none;
}
.md-typeset table:not([class]) th {
  background-color: var(--accent-soft);
  color: var(--ink);
  font-weight: 600;
}
.md-typeset table:not([class]) td {
  border-top: 1px solid var(--line);
}

/* ============================================================
   CODE
   ============================================================ */
.md-typeset pre > code {
  border-radius: var(--r);
}
.md-typeset code {
  border-radius: var(--r-sm);
  padding: 0.05em 0.35em;
}

/* ============================================================
   TABBED CONTENT
   ============================================================ */
.md-typeset .tabbed-labels > label {
  font-weight: 600;
}
.md-typeset .tabbed-set > input:checked + label {
  color: var(--accent);
  border-color: var(--accent);
}

/* ============================================================
   FOOTER
   ============================================================ */
.md-footer-meta {
  background-color: var(--md-primary-fg-color--dark);
}
.md-footer {
  background-color: var(--surface);
  color: var(--ink);
  border-top: 1px solid var(--line);
}
.md-footer__link {
  color: var(--ink);
}

/* ============================================================
   PAGE TRANSITION (subtle)
   ============================================================ */
.md-content {
  animation: fadeIn 0.2s ease-out;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media screen and (max-width: 44.9375em) {
  .hero {
    padding: 2.4rem 0 1.6rem;
  }
  .stats-bar .stat {
    padding-right: 1.1rem;
    margin-right: 1.1rem;
  }
  .stats-bar .stat-value {
    font-size: 1.5rem;
  }
}