/* FYI Design — Universal Semantic Tokens */

:root {
  /* Background */
  --fyi-bg-primary: #ffffff;
  --fyi-bg-secondary: #f8fafc;
  --fyi-bg-tertiary: #f1f5f9;

  /* Text */
  --fyi-text-primary: #0f172a;
  --fyi-text-secondary: #475569;
  --fyi-text-muted: #94a3b8;

  /* Border */
  --fyi-border: #e2e8f0;
  --fyi-border-light: #f1f5f9;

  /* Shadows */
  --fyi-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --fyi-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);

  /* Radius */
  --fyi-radius-sm: 0.375rem;
  --fyi-radius-md: 0.5rem;
  --fyi-radius-lg: 0.75rem;
}

.dark {
  --fyi-bg-primary: #0f172a;
  --fyi-bg-secondary: #1e293b;
  --fyi-bg-tertiary: #334155;
  --fyi-text-primary: #f1f5f9;
  --fyi-text-secondary: #94a3b8;
  --fyi-text-muted: #64748b;
  --fyi-border: #334155;
  --fyi-border-light: #1e293b;
  --fyi-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.2);
  --fyi-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.3), 0 2px 4px -2px rgb(0 0 0 / 0.2);
}

/* ==========================================================================
   Frontend Gold Standard primitives (v0.3.0) — ADDITIVE.
   Every rule below is scoped to a new `.fyi-*` class that no existing template
   uses, so sites that do not adopt the new tags render unchanged. See
   frontend-gold-standard.md §1–§2. No bare element selectors here on purpose.
   ========================================================================== */

/* Perf/mobile baseline (§2): guarantee these components inherit a ≥16px base
   so prose never renders below body size; no post-load injection = zero CLS. */
.fyi-toc,
.fyi-faq,
.fyi-references {
  font-size: 1rem;
}

/* --- {% fyi_toc %} : mobile collapsible <details>, sticky + always-open at lg+ */
.fyi-toc__summary {
  min-height: 48px; /* ≥48px tap target (§2) */
}
.fyi-toc[open] .fyi-toc__caret {
  transform: rotate(180deg);
}
@media (min-width: 1024px) {
  .fyi-toc {
    position: sticky;
    top: 5rem;
  }
}
/* Reveal the outline on desktop without JS in browsers that support the
   ::details-content pseudo (Baseline 2026). Where unsupported, the <details>
   degrades to a normal collapsible everywhere — links stay in the HTML either
   way, so SSR/crawlability is never affected. */
@supports selector(::details-content) {
  @media (min-width: 1024px) {
    .fyi-toc > summary {
      display: none;
    }
    .fyi-toc::details-content {
      content-visibility: visible;
      display: block;
    }
  }
}

/* --- {% fyi_faq %} : accordion summaries are ≥48px tap targets (§2) */
.fyi-faq__q {
  min-height: 48px;
}

/* --- .fyi-table-scroll : reusable wide-table overflow-x wrapper (§2).
   Wrap any wide <table> so the page body never scrolls horizontally. */
.fyi-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}
.fyi-table-scroll > table {
  min-width: 100%;
}