/* SYNFIDIA v2.0; companion to synfidia.tokens.json. Paths are relative to this CSS. */
@font-face {
  font-family: "Inter";
  src: url("./Inter-Variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}
:root {
  --syn-navy: #0F2747;
  --syn-teal: #2FB5A7;
  --syn-graphite: #2E2E2E;
  --syn-paper: #F6F8FA;
  --syn-mist: #E5E7EB;
  --syn-muted: #63728A;
  --syn-action: #16786F;
  --syn-white: #FFFFFF;
  --syn-black: #000000;
  --syn-font-latin: "Inter", sans-serif;
  --syn-font-chinese: "Noto Sans SC", sans-serif;
  --syn-font-body: 400;
  --syn-font-label: 550;
  --syn-font-heading: 650;
  --syn-font-chinese-heading: 600;
  --syn-body-size: 16px;
  --syn-body-line-height: 1.6;
  --syn-spacing: 4px;
  --syn-content-max: 1200px;
  --syn-gutter: 20px;
  --syn-nav-width: 128px;
  --syn-nav-min: 112px;
  --syn-header-height: 72px;
  /* Half of the rendered custom-s height: external clear space for the tight wordmark. */
  --syn-logo-clear: calc(var(--syn-nav-width) * 0.0795277927);
  --syn-canvas: var(--syn-white);
  --syn-surface: var(--syn-paper);
  --syn-text: var(--syn-graphite);
  --syn-heading: var(--syn-navy);
  --syn-secondary: var(--syn-muted);
  --syn-link: var(--syn-action);
  --syn-accent: var(--syn-teal);
  --syn-divider: var(--syn-mist);
  --syn-button-background: var(--syn-action);
  --syn-button-text: var(--syn-white);
  --syn-focus: var(--syn-action);
  color-scheme: light;
}
@media (min-width: 768px) {
  :root { --syn-gutter: 24px; --syn-nav-width: 160px; --syn-header-height: 88px; }
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --syn-canvas: var(--syn-navy); --syn-surface: var(--syn-navy);
    --syn-text: var(--syn-paper); --syn-heading: var(--syn-white);
    --syn-secondary: var(--syn-mist); --syn-link: var(--syn-teal);
    --syn-divider: var(--syn-muted); --syn-focus: var(--syn-teal);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --syn-canvas: var(--syn-navy); --syn-surface: var(--syn-navy);
  --syn-text: var(--syn-paper); --syn-heading: var(--syn-white);
  --syn-secondary: var(--syn-mist); --syn-link: var(--syn-teal);
  --syn-divider: var(--syn-muted); --syn-focus: var(--syn-teal);
  color-scheme: dark;
}
/* Opt in with class="synfidia-site" on the site's body. Noto Sans SC requires deliberate loading. */
.synfidia-site { margin: 0; background: var(--syn-canvas); color: var(--syn-text); font-family: var(--syn-font-latin); font-size: var(--syn-body-size); font-weight: var(--syn-font-body); line-height: var(--syn-body-line-height); }
.synfidia-site :lang(zh) { font-family: var(--syn-font-chinese); }
.synfidia-site :is(h1, h2, h3, h4, h5, h6) { color: var(--syn-heading); font-weight: var(--syn-font-heading); }
.synfidia-site :is(h1, h2, h3, h4, h5, h6):lang(zh) { font-weight: var(--syn-font-chinese-heading); }
.synfidia-site a { color: var(--syn-link); text-underline-offset: 0.15em; }
.synfidia-site :focus-visible { outline: 2px solid var(--syn-focus); outline-offset: 4px; }
.synfidia-container { width: min(100%, var(--syn-content-max)); padding-inline: var(--syn-gutter); margin-inline: auto; box-sizing: border-box; }
.synfidia-header { min-height: var(--syn-header-height); background: var(--syn-canvas); }
.synfidia-header__inner { min-height: var(--syn-header-height); display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.synfidia-brand { display: inline-flex; flex: none; align-items: center; padding: var(--syn-logo-clear); margin-inline-start: calc(-1 * var(--syn-logo-clear)); line-height: 1; }
.synfidia-nav-logo { display: block; width: var(--syn-nav-width); min-width: var(--syn-nav-min); height: auto; }
.synfidia-nav-logo--dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .synfidia-nav-logo--light { display: none; }
  :root:not([data-theme="light"]) .synfidia-nav-logo--dark { display: block; }
}
:root[data-theme="dark"] .synfidia-nav-logo--light { display: none; }
:root[data-theme="dark"] .synfidia-nav-logo--dark { display: block; }
.synfidia-button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 12px 20px; border: 1px solid currentColor; border-radius: 4px; background: var(--syn-button-background); color: var(--syn-button-text); font: inherit; font-weight: var(--syn-font-label); text-decoration: none; cursor: pointer; }
.synfidia-site a.synfidia-button { color: var(--syn-button-text); }
/* Do not add filters, text, font glyphs, masks, gradients or CSS drawings to alter logo artwork. */