/* ============================================================
   Telha documentation theme  ·  Design System v0.2
   Consumes the DS tokens from assets/telha-tokens.css (loaded first).
   Product mode: light app surface, blue = brand/action/AI/links,
   red = CTA + genuine risk, warm stone borders, dark only for footer.
   ============================================================ */

/* ---- Vendored fonts (fully offline; no Google Fonts CDN) ----------------- */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/inter-400.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/inter-500.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/inter-600.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/inter-700.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/jetbrains-mono-400.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/jetbrains-mono-600.woff2") format("woff2"); }

/* ---- Light scheme: map Material vars onto DS tokens ---------------------- */
:root,
[data-md-color-scheme="default"] {
  --md-text-font: "Inter";
  --md-text-font-family: var(--telha-font-body);
  --md-code-font: "JetBrains Mono";
  --md-code-font-family: var(--telha-font-mono);

  --md-default-bg-color:            var(--telha-bg-app);
  --md-default-fg-color:            var(--telha-text-primary);
  --md-default-fg-color--light:     var(--telha-text-secondary);
  --md-default-fg-color--lighter:   var(--telha-text-muted);
  --md-default-fg-color--lightest:  var(--telha-border-default);

  /* Header stays LIGHT (DS has no dark chrome except the footer). */
  --md-primary-fg-color:            var(--telha-bg-surface);
  --md-primary-fg-color--light:     var(--telha-bg-surface);
  --md-primary-fg-color--dark:      var(--telha-bg-surface);
  --md-primary-bg-color:            var(--telha-text-primary);
  --md-primary-bg-color--light:     var(--telha-text-secondary);

  --md-accent-fg-color:             var(--telha-action-brand);
  --md-accent-fg-color--transparent: rgba(22, 119, 255, 0.10);

  --md-typeset-a-color:             var(--telha-text-brand);
  --md-typeset-mark-color:          rgba(22, 119, 255, 0.20);

  --md-code-bg-color:               var(--telha-bg-surface-muted);
  --md-code-fg-color:               var(--telha-ink-800);

  --md-footer-bg-color:             var(--telha-bg-inverse);
  --md-footer-bg-color--dark:       var(--telha-ink-900);

  --md-shadow-z1: var(--telha-shadow-xs);
  --md-shadow-z2: var(--telha-shadow-sm);
}

/* ---- Dark scheme: DS inks, blue accent kept ----------------------------- */
[data-md-color-scheme="slate"] {
  --md-hue: 221;
  --md-default-bg-color:            var(--telha-ink-950);
  --md-default-fg-color:            rgba(245, 248, 251, 0.90);
  --md-default-fg-color--light:     rgba(245, 248, 251, 0.66);
  --md-default-fg-color--lighter:   rgba(245, 248, 251, 0.42);
  --md-default-fg-color--lightest:  rgba(245, 248, 251, 0.14);
  --md-primary-fg-color:            var(--telha-ink-900);
  --md-primary-bg-color:            #f5f8fb;
  --md-primary-bg-color--light:     rgba(245, 248, 251, 0.7);
  --md-accent-fg-color:             var(--telha-blue-400);
  --md-typeset-a-color:             var(--telha-blue-300);
  --md-code-bg-color:               var(--telha-ink-800);
  --md-code-fg-color:               #e9eef4;
  --md-footer-bg-color:             var(--telha-black);
}

/* ---- Typography --------------------------------------------------------- */
.md-typeset h1,
.md-typeset h2,
.md-typeset h3 {
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--telha-text-primary);
}
[data-md-color-scheme="slate"] .md-typeset h1,
[data-md-color-scheme="slate"] .md-typeset h2,
[data-md-color-scheme="slate"] .md-typeset h3 { color: var(--md-default-fg-color); }
.md-typeset h1 { font-weight: 760; letter-spacing: -0.03em; }

/* DS eyebrow: uppercase, red, letter-spaced. */
.md-typeset .eyebrow {
  display: inline-block;
  margin: 0 0 var(--telha-space-3);
  color: var(--telha-text-accent);
  font-size: var(--telha-type-xs);
  font-weight: 760;
  letter-spacing: var(--telha-tracking-eyebrow);
  text-transform: uppercase;
}

/* ---- Header + nav tabs (light) ------------------------------------------ */
.md-header {
  color: var(--telha-text-primary);
  border-bottom: 1px solid var(--telha-border-default);
  box-shadow: none;
}
.md-header--shadow { box-shadow: var(--telha-shadow-xs); }
.md-header__title { font-weight: 700; }
.md-header__button.md-logo img { height: 1.9rem; width: auto; }
.md-tabs {
  background: var(--telha-bg-surface);
  color: var(--telha-text-secondary);
  border-bottom: 1px solid var(--telha-border-default);
}
.md-tabs__link { opacity: 1; color: var(--telha-text-secondary); font-weight: 600; }
.md-tabs__link:hover,
.md-tabs__link--active { color: var(--telha-text-brand); }
.md-tabs__item--active > .md-tabs__link { border-bottom: 2px solid var(--telha-action-brand); }
.md-search__form { background: var(--telha-bg-surface-muted); border: 1px solid var(--telha-border-default); border-radius: var(--telha-radius-pill); }
.md-search__form:hover { background: var(--telha-bg-surface); }
[data-md-color-scheme="slate"] .md-header,
[data-md-color-scheme="slate"] .md-tabs { border-bottom-color: var(--telha-border-inverse); }
[data-md-color-scheme="slate"] .md-tabs { background: var(--telha-ink-900); }

/* Active item in the left sidebar */
.md-nav__link--active,
.md-nav__item .md-nav__link--active { color: var(--telha-text-brand); font-weight: 650; }

/* ---- Hero on the home page (light, DS memory-glow) ---------------------- */
.md-typeset .hero {
  position: relative;
  background:
    radial-gradient(60% 120% at 78% 10%, rgba(22, 119, 255, 0.14), transparent 60%),
    linear-gradient(180deg, var(--telha-cream-50), var(--telha-bg-surface));
  border: 1px solid var(--telha-border-default);
  border-radius: var(--telha-radius-2xl);
  padding: 3.2rem 2.4rem 2.8rem;
  margin: 0 0 2rem;
  text-align: center;
  overflow: hidden;
  box-shadow: var(--telha-shadow-sm);
}
.md-typeset .hero .eyebrow { color: var(--telha-text-accent); }
.md-typeset .hero h1 {
  font-family: var(--telha-font-display);
  font-weight: 500;
  letter-spacing: var(--telha-tracking-tight);
  line-height: var(--telha-leading-tight);
  color: var(--telha-text-primary);
  font-size: clamp(2rem, 5vw, 3rem);
  margin: 0.2rem 0 0.7rem;
}
.md-typeset .hero p {
  color: var(--telha-text-secondary);
  max-width: 46rem;
  margin: 0 auto 1rem;
  font-size: var(--telha-type-lg);
}
.md-typeset .hero .hl { color: var(--telha-text-brand); }

/* ---- Buttons (DS telha-button) ------------------------------------------ */
.md-typeset .md-button {
  border-radius: var(--telha-radius-sm);
  border: 1px solid var(--telha-border-default);
  background: var(--telha-bg-surface);
  color: var(--telha-text-primary);
  font-weight: 650;
  transition: transform var(--telha-motion-fast) var(--telha-ease-standard),
              background var(--telha-motion-fast) var(--telha-ease-standard);
}
.md-typeset .md-button:hover { transform: translateY(-1px); background: var(--telha-bg-surface-muted); border-color: var(--telha-border-strong); color: var(--telha-text-primary); }
.md-typeset .md-button--primary {
  background: var(--telha-action-brand);
  border-color: var(--telha-action-brand);
  color: #fff;
}
.md-typeset .md-button--primary:hover { background: var(--telha-action-brand-hover); border-color: var(--telha-action-brand-hover); color: #fff; }

/* ---- Cards grid (DS telha-card) ----------------------------------------- */
.md-typeset .grid.cards > ul > li,
.md-typeset .grid > .card {
  border: 1px solid var(--telha-border-default);
  border-radius: var(--telha-radius-lg);
  background: var(--telha-bg-surface);
  box-shadow: var(--telha-shadow-xs);
  transition: transform var(--telha-motion-fast) var(--telha-ease-standard),
              border-color var(--telha-motion-fast) var(--telha-ease-standard),
              box-shadow var(--telha-motion-fast) var(--telha-ease-standard);
}
.md-typeset .grid.cards > ul > li:hover {
  border-color: var(--telha-border-selected);
  box-shadow: var(--telha-shadow-sm);
  transform: translateY(-1px);
}
.md-typeset .grid.cards > ul > li > hr { margin: 0.8em 0; border-color: var(--telha-border-subtle); }
.md-typeset .grid.cards .lg.middle { color: var(--telha-text-brand); }

/* ---- Tables ------------------------------------------------------------- */
.md-typeset table:not([class]) {
  border: 1px solid var(--telha-border-default);
  border-radius: var(--telha-radius-md);
  overflow: hidden;
}
.md-typeset table:not([class]) th {
  background: var(--telha-bg-surface-muted);
  color: var(--telha-text-primary);
  font-weight: 700;
  border-bottom: 1px solid var(--telha-border-default);
}
.md-typeset table:not([class]) td { border-top: 1px solid var(--telha-border-subtle); }
[data-md-color-scheme="slate"] .md-typeset table:not([class]) th { background: var(--telha-ink-800); }

/* ---- Code --------------------------------------------------------------- */
.md-typeset pre > code { border-radius: var(--telha-radius-sm); }
.md-typeset code { border-radius: var(--telha-radius-xs); }
.md-typeset .highlight span.filename {
  border-top-left-radius: var(--telha-radius-sm);
  border-top-right-radius: var(--telha-radius-sm);
  background: var(--telha-ink-800);
  color: #fff;
  font-weight: 600;
}

/* ---- Admonitions -------------------------------------------------------- */
.md-typeset .admonition,
.md-typeset details {
  border-radius: var(--telha-radius-md);
  border-left-width: 3px;
  box-shadow: var(--telha-shadow-xs);
}
/* Custom "spec" admonition: brand blue (links a page to its normative spec) */
.md-typeset .admonition.spec,
.md-typeset details.spec { border-color: var(--telha-action-brand); }
.md-typeset .spec > .admonition-title,
.md-typeset .spec > summary { background: var(--telha-bg-brand-soft); }
.md-typeset .spec > .admonition-title::before,
.md-typeset .spec > summary::before {
  background-color: var(--telha-action-brand);
  -webkit-mask-image: var(--md-admonition-icon--note);
          mask-image: var(--md-admonition-icon--note);
}

/* ---- Footer (the one dark surface, DS inverse) -------------------------- */
.md-footer { background: var(--telha-bg-inverse); color: var(--telha-text-inverse); }
.md-footer-meta { background: var(--md-footer-bg-color--dark); }
.md-footer__link:focus, .md-footer__link:hover { opacity: 1; }

/* ---- Slack-style chat-card mockups (operators/chat-cards, user-guide) ----
   These represent Slack/Teams UI, not Telha's DS, so they keep Slack's own
   palette on purpose. --------------------------------------------------- */
.md-typeset .slack-card {
  background: #fff;
  color: #1d1c1d;
  border: 1px solid rgba(29, 28, 29, 0.13);
  border-radius: 10px;
  padding: 0.85rem 1rem;
  margin: 1rem 0;
  max-width: 560px;
  font-size: 0.8rem;
  line-height: 1.5;
  box-shadow: 0 1px 2px rgba(10, 25, 48, 0.06);
}
.md-typeset .slack-card p { margin: 0.3rem 0; }
.slack-head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }
.slack-ava { width: 36px; height: 36px; border-radius: 8px; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 0.8rem; flex: 0 0 auto; }
.slack-ava.telha { background: #ffffff url("logo.png") center / 86% no-repeat; border: 1px solid var(--telha-border-subtle); font-size: 0; }
.slack-name { font-weight: 700; color: #1d1c1d; }
.slack-app { font-size: 0.58rem; font-weight: 700; background: #e8e8e8; color: #616061; border-radius: 3px; padding: 0.05rem 0.28rem; text-transform: uppercase; margin-left: 0.15rem; letter-spacing: 0.02em; }
.slack-time { color: #616061; font-weight: 400; font-size: 0.72rem; margin-left: 0.2rem; }
.slack-card .bk-h { font-size: 0.95rem; font-weight: 700; margin: 0.1rem 0 0.5rem; color: #1d1c1d; }
.slack-card .bk-div { border: 0; border-top: 1px solid rgba(29, 28, 29, 0.1); margin: 0.6rem 0; }
.slack-card .bk-ctx { color: #616061; font-size: 0.72rem; margin: 0.3rem 0; }
.slack-card .bk-fields { display: grid; grid-template-columns: auto 1fr; gap: 0.12rem 0.9rem; margin: 0.4rem 0; }
.slack-card .bk-fields dt { font-weight: 700; color: #1d1c1d; margin: 0; }
.slack-card .bk-fields dd { color: #454545; margin: 0; }
.slack-card .bk-fields dt.deny, .slack-card .bk-fields dd.deny { color: #c0392b; }
.slack-card .bk-verified { color: #2b8a3e; font-weight: 600; font-size: 0.75rem; margin: 0.4rem 0; }
.slack-card .bk-link { color: #1264a3; }
.slack-card .bk-attach { border-left: 3px solid #1677ff; padding: 0.1rem 0 0.1rem 0.7rem; margin: 0.4rem 0; }
.slack-card .bk-attach.deny { border-left-color: #e0a800; }
.slack-card .bk-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.6rem; }
.slack-card .bk-btn { font-size: 0.74rem; font-weight: 700; border: 1px solid rgba(29, 28, 29, 0.25); background: #fff; color: #1d1c1d; border-radius: 5px; padding: 0.32rem 0.7rem; display: inline-block; }
.slack-card .bk-btn.primary { background: #007a5a; border-color: #007a5a; color: #fff; }
.slack-card .bk-btn.danger { color: #c0392b; border-color: rgba(192, 57, 43, 0.4); }