custom.css

/**
 * Any CSS included here will be global. The classic template
 * bundles Infima by default. Infima is a CSS framework designed to
 * work well for content-centric websites.
 */

/* Tailwind utilities only (preflight disabled in tailwind.config.js) —
   used selectively for motion/spacing utilities, layered on top of the
   existing Infima + brand token system below. Does not replace it. */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Typography: native CJK system stack.
   PingFang SC (macOS/iOS) — 6 weights, Apple's premium screen-optimized CJK sans.
   Microsoft YaHei (Windows) — standard Chinese enterprise UI font.
   Noto Sans CJK SC (Linux) — fallback, matches Noto Sans SC metrics.
   Zero download, OS-native hinting, instant render. No FOUT/FOIT. */
:root {
  --fzs-font-display: "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fzs-font-body: "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Brand Color: 九桥同步 — logo crimson (from DESIGN.md).
     Chroma 0.16 = sRGB ceiling at L40/H25; 0.185 clipped, this is the honest in-gamut value. */
  --ifm-color-primary: oklch(40% 0.16 25);
  --ifm-color-primary-dark: oklch(33% 0.170 25);
  --ifm-color-primary-darker: oklch(27% 0.153 25);
  --ifm-color-primary-darkest: oklch(22% 0.132 25);
  --ifm-color-primary-light: oklch(52% 0.175 25);
  --ifm-color-primary-lighter: oklch(65% 0.145 25);
  --ifm-color-primary-lightest: oklch(95.5% 0.010 25);
  
  --ifm-code-font-size: 95%;
  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);

  /* Typography */
  --ifm-font-family-base: var(--fzs-font-body);
  --ifm-heading-font-weight: 600;
  --ifm-font-weight-semibold: 600;

  /* Tinted shadows — crimson-hued, single light source, not pure black */
  --fzs-shadow-sm: 0 1px 2px oklch(40% 0.06 25 / 0.06);
  --fzs-shadow-md: 0 8px 20px oklch(40% 0.08 25 / 0.10);
  --fzs-shadow-lg: 0 14px 36px oklch(40% 0.10 25 / 0.14);

  /* Card & UI Polish */
  --ifm-card-border-radius: 8px;
  --ifm-global-shadow-lw: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

/* Display font stack for marketing headlines; tabular numerals for data */
h1, h2, .hero__title { font-family: var(--fzs-font-display); }

/* For readability concerns, you should choose a lighter palette in dark mode.
   Dark-mode red runs warmer (hue 27) with higher chroma than a naive lightening
   of the light-mode crimson: at L~66 a low-chroma red reads as salmon/pink, so
   chroma is held high to keep it unmistakably red. Verified WCAG AA (≥4.5:1) for
   the primary on both page (#1b1b1d) and surface (#242526) backgrounds. */
[data-theme='dark'] {
  --ifm-color-primary: oklch(66% 0.170 27);
  --ifm-color-primary-dark: oklch(59% 0.180 27);
  --ifm-color-primary-darker: oklch(52% 0.185 27);
  --ifm-color-primary-darkest: oklch(45% 0.180 27);
  --ifm-color-primary-light: oklch(73% 0.140 27);
  --ifm-color-primary-lighter: oklch(81% 0.100 27);
  --ifm-color-primary-lightest: oklch(91% 0.045 27);
  
  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
}

/* --- Professional UI Enhancements --- */

/* 1. Cleaner Sidebar */
.theme-doc-sidebar-menu {
  font-size: 0.95rem;
}

/* 2. Modern Admonitions (Alerts) — full-border box, no side stripe */
.alert {
  --ifm-alert-border-width: 1px;
  --ifm-alert-border-left-width: 1px;
  border-radius: 6px;
}

/* 3. Image Styling (Screenshots) */
article img {
  max-width: 100%;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border: 1px solid var(--ifm-color-emphasis-200);
  /* content-shift prevention: images are block-level by default in article */
  display: block;
  cursor: zoom-in;
}

/* Hover lift — respects reduced-motion preference */
@media (prefers-reduced-motion: no-preference) {
  article img {
    transition: box-shadow 0.2s ease;
  }
  article img:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
  }
}

[data-theme='dark'] article img {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  border-color: var(--ifm-color-emphasis-300);
}

/* 4. Table Styling */
table {
  display: table;
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1.5rem;
  /* Contain table layout so changes don't reflow the whole page */
  contain: layout style;
}

table th {
  background-color: var(--ifm-color-emphasis-100);
  border-top: 1px solid var(--ifm-color-emphasis-300);
  border-bottom: 2px solid var(--ifm-color-emphasis-300);
  padding: 12px;
}

table td {
  padding: 12px;
  border-bottom: 1px solid var(--ifm-color-emphasis-200);
}

/* 5. Hero Banner text (if used) */
.hero__title {
  font-weight: 800;
  letter-spacing: -0.5px;
}

/* 6. Performance: skip rendering off-screen content */
.theme-doc-markdown {
  content-visibility: auto;
  contain-intrinsic-size: auto 600px;
}

/* ============================================================
   9. Text Overflow Hardening
   ============================================================ */

/*
 * Inline code (parameter names like export.param_sync_java, URLs, etc.)
 * Let them wrap rather than punching out of the container.
 */
p code,
li code,
td code,
th code {
  overflow-wrap: break-word;
  word-break: break-word;
}

/*
 * Long hyperlinks: URLs in running text wrap naturally.
 */
article a {
  overflow-wrap: break-word;
  word-break: break-word;
}

/*
 * CJK body text: allow breaks at character boundaries as a fallback
 * but prefer the standard strict (don't break before/after punctuation).
 */
.theme-doc-markdown {
  word-break: normal;
  overflow-wrap: break-word;
  line-break: strict;
}

/*
 * Sidebar navigation items: long page titles must wrap, not overflow.
 */
.menu__link {
  overflow-wrap: break-word;
  word-break: break-word;
}

/*
 * Table cells: raw text (not just code) should also wrap gracefully.
 */
table td,
table th {
  overflow-wrap: break-word;
}

/* ============================================================
   Scroll Reveal — smooth anchor scrolling site-wide.
   Per-element reveal animations now live in Tailwind utility classes
   (see src/utils/reveal.js), driven by the same data-reveal attribute
   toggled by src/hooks/useReveal.js.
   ============================================================ */

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* ============================================================
   10. Keyboard Navigation — Focus Visibility
   ============================================================ */

/*
 * Docusaurus inherits the browser default outline on focus, which can be
 * invisible on some background colors. Explicitly show a branded ring
 * for keyboard navigation while suppressing it for mouse clicks.
 */
:focus-visible {
  outline: 2px solid var(--ifm-color-primary);
  outline-offset: 3px;
  border-radius: 3px;
}

:focus:not(:focus-visible) {
  outline: none;
}

/* ============================================================
   7. Responsive Adaptations
   ============================================================ */

/* --- 7a. Mobile (≤768px): tables scroll horizontally --- */
/*
 * Docusaurus's default table styles don't handle overflow.
 * Switching to display:block lets the element scroll while
 * inner tr/td/th rows still render as a proper table grid.
 */
@media (max-width: 768px) {
  .theme-doc-markdown table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; /* momentum scroll on iOS */
    contain: none; /* reset layout containment — only applies to tables */
  }

  table th,
  table td {
    padding: 8px 10px; /* tighter cells on narrow screens */
    min-width: 4.5rem; /* prevent columns from collapsing too narrow */
  }

  /* Long parameter names in code-formatted cells */
  table td code,
  table th code {
    word-break: break-all;
  }
}

/* --- 7b. Touch-friendly momentum scrolling for code blocks --- */
pre code,
.prism-code {
  -webkit-overflow-scrolling: touch;
}

/* --- 7c. Mobile: center standalone images --- */
@media (max-width: 768px) {
  article img {
    margin-inline: auto;
  }
}

/* ============================================================
   8. Print Styles
   ============================================================ */
@media print {
  /* Hide interactive chrome */
  .navbar,
  .footer,
  .theme-doc-sidebar-container,
  .pagination-nav,
  .theme-doc-toc-desktop,
  .theme-edit-this-page,
  .theme-last-update,
  .breadcrumbs__item--active .breadcrumbs__link,
  .medium-zoom-overlay {
    display: none !important;
  }

  /* Full-width reading area */
  .main-wrapper,
  article {
    max-width: 100% !important;
    padding: 0 !important;
  }

  /* Clean images for print — remove screen-only decoration */
  article img {
    box-shadow: none !important;
    border-color: #ccc !important;
    cursor: auto;
    page-break-inside: avoid;
  }

  /* Restore normal table display (overrides the mobile block rule) */
  .theme-doc-markdown table {
    display: table !important;
    overflow: visible !important;
    width: 100% !important;
  }

  /* Keep headings with their following content */
  h1, h2, h3, h4 {
    page-break-after: avoid;
  }

  /* Keep blocks together where possible */
  pre, blockquote, table {
    page-break-inside: avoid;
  }

  /* Wrap long code lines instead of scrolling */
  pre, code {
    white-space: pre-wrap;
    word-break: break-word;
  }

  /* Show destination URL after external links */
  a[href^='http']::after {
    content: ' (' attr(href) ')';
    font-size: 0.78em;
    color: #555;
  }

  @page {
    margin: 2cm;
  }
}

/* ============================================================
   §11 — Brand Logo in Footer & Navbar
   ============================================================ */

/* Footer logo: invert for dark footer background */
.footer__logo {
  opacity: 0.9;
  filter: brightness(0) invert(1);
}

/* Navbar brand logo sizing */
.navbar__logo img {
  height: 28px;
  width: auto;
}

[data-theme='dark'] .navbar__logo img {
  filter: brightness(0) invert(1);
}