/*
 * KG Channel Intelligence OS V11.2 R11.6.1 — Theme Parity & Vietnamese Type
 *
 * Final presentation guard loaded after every earlier visual layer.
 * It gives Light and Dark the same content geometry, supplies a deterministic
 * Vietnamese serif, and restores foreground/background contrast where older
 * generic rules could leak into route-specific components.
 */

@font-face {
  font-family: "Newsreader KG Vietnamese";
  src: url("./kg-newsreader-vietnamese-regular-r1161.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Newsreader KG Vietnamese";
  src: url("./kg-newsreader-vietnamese-italic-r1161.woff2") format("woff2");
  font-style: italic;
  font-weight: 400;
  font-display: swap;
}

html[data-kg-theme] {
  /* R10 accidentally rebound --kgx-content to a colour in Light mode. */
  --kgx-content: 1500px;
  --kg-ui-content-max: 1500px;
  --kg-ui-body-font:
    Inter, "Segoe UI Variable Text", "Segoe UI", Arial, system-ui,
    -apple-system, sans-serif;
  --kg-ui-display-font:
    "Newsreader KG Vietnamese", "Times New Roman", serif;
}

html[data-kg-theme="dark"] {
  --kg-ui-control: #171a1c;
  --kg-ui-control-disabled: #292d2f;
  --kg-ui-disabled-text: #c7c2ba;
  --kg-ui-placeholder: #aaa39a;
  --kg-ui-border: #596064;
}

html[data-kg-theme="light"] {
  --kg-ui-control: #fffaf3;
  --kg-ui-control-disabled: #ded6cc;
  --kg-ui-disabled-text: #4a433b;
  --kg-ui-placeholder: #685f56;
  --kg-ui-border: #a99682;

  /* Coral on the ivory canvas was 4.38:1. This value remains on-brand and
     clears the 4.5:1 normal-text threshold on both canvas and cards. */
  --kgp-coral: #ad3c2c;
  --kgp-coral-hover: #963423;
  --kgc-signal: #ad3c2c;
  --kgc-signal-hover: #963423;
  --kgl-coral: #ad3c2c;
  --kgl-coral-hover: #963423;
}

html[data-kg-theme] body,
html[data-kg-theme] button,
html[data-kg-theme] input,
html[data-kg-theme] select,
html[data-kg-theme] textarea {
  font-family: var(--kg-ui-body-font) !important;
}

/* One geometry contract for every route in Light and Dark. */
html[data-kg-theme] .mainContent {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
}

html[data-kg-theme] .mainContent > * {
  width: min(100%, var(--kg-ui-content-max)) !important;
  max-width: var(--kg-ui-content-max) !important;
  min-width: 0;
  margin-right: auto !important;
  margin-left: auto !important;
}

html[data-kg-theme]
  :where(input, select, textarea):not([type="checkbox"]):not([type="radio"]) {
  color: var(--kgc-ink) !important;
  border-color: var(--kg-ui-border) !important;
  background: var(--kg-ui-control) !important;
}

html[data-kg-theme] ::placeholder {
  color: var(--kg-ui-placeholder) !important;
  opacity: 1 !important;
}

html[data-kg-theme] .mainContent button:disabled,
html[data-kg-theme]
  .mainContent
  :where(input, select, textarea):not([type="checkbox"]):not([type="radio"]):disabled {
  color: var(--kg-ui-disabled-text) !important;
  border-color: var(--kg-ui-border) !important;
  background: var(--kg-ui-control-disabled) !important;
  box-shadow: none !important;
  opacity: 1 !important;
}

/* TITLE-TO-PRODUCTION: deterministic Vietnamese glyph metrics. */
html[data-kg-theme]
  .pb116
  :where(
    .pbHero h1,
    .pbHeroMark span,
    .pbComposerHead h2,
    .pbTitleInput textarea,
    .pbProcessStep > span,
    .pbPreflight h2,
    .pbCoverageGrid b,
    .pbResultHeader h2,
    .pbHookCard blockquote,
    .pbOrder,
    .pbEmpty > span,
    .pbEmpty h2
  ) {
  font-family: var(--kg-ui-display-font) !important;
  font-kerning: normal;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  word-break: normal;
  overflow-wrap: normal;
}

html[data-kg-theme] .pbHero h1 {
  letter-spacing: -0.038em;
}

html[data-kg-theme] .pbHero h1 em,
html[data-kg-theme] .pbEyebrow,
html[data-kg-theme] .pbProcessStep > span,
html[data-kg-theme] .pbTable td > code,
html[data-kg-theme] .pbTable td > a,
html[data-kg-theme] .pbEmpty > span {
  color: var(--pb-accent) !important;
}

html[data-kg-theme] .pb116 :where(h1, h2, h3, h4, b, strong, label) {
  color: var(--pb-text) !important;
}

html[data-kg-theme]
  .pb116
  :where(
    .pbHeroCopy > p,
    .pbTitleInput > span,
    .pbTitleInput small,
    .pbComposerAction > div,
    .pbProcessStep small,
    .pbProcessing p,
    .pbCoverageGrid span,
    .pbBlockerList p,
    .pbWarnings,
    .pbSessionStrip span,
    .pbAnalysis span,
    .pbAnalysis p,
    .pbTable th,
    .pbTable td > small,
    .pbOriginal,
    .pbOrder,
    .pbTags span,
    .pbGifEmpty,
    .pbResultFooter p,
    .pbEmpty p
  ) {
  color: var(--pb-muted) !important;
}

html[data-kg-theme] .pbError,
html[data-kg-theme] .pbError p {
  color: var(--pb-danger) !important;
}

html[data-kg-theme] .pbStateBadge,
html[data-kg-theme] .pbBlockerList article > span,
html[data-kg-theme] .pbSafety {
  color: var(--pb-warning) !important;
}

html[data-kg-theme] .pbPreflight.ready .pbStateBadge,
html[data-kg-theme] .pbSegment.cool_down {
  color: var(--pb-success) !important;
}

html[data-kg-theme] .pbSegment.main {
  color: var(--pb-accent) !important;
}

/* Older global button rules made both mode options look selected. */
html[data-kg-theme] .pbMode button,
html[data-kg-theme] .pbResultActions button {
  color: var(--pb-muted) !important;
  border-color: var(--pb-line-strong) !important;
  background: transparent !important;
  box-shadow: none !important;
}

html[data-kg-theme] .pbMode button.active {
  color: var(--pb-bg) !important;
  background: var(--pb-text) !important;
}

html[data-kg-theme] .pbComposerAction button[data-primary="true"]:not(:disabled),
html[data-kg-theme] .pbResultActions button[data-primary="true"]:not(:disabled) {
  color: var(--pb-accent-ink) !important;
  border-color: var(--pb-accent) !important;
  background: var(--pb-accent) !important;
}

html[data-kg-theme] .pbTitleInput textarea {
  color: var(--pb-text) !important;
  border-color: var(--pb-line-strong) !important;
  background: var(--pb-bg) !important;
}

html[data-kg-theme] .pbTitleInput textarea::placeholder {
  color: var(--pb-muted) !important;
  opacity: 0.78 !important;
}

html[data-kg-theme] .pbTitleInput textarea:disabled {
  color: var(--kg-ui-disabled-text) !important;
  border-color: var(--kg-ui-border) !important;
  background: var(--kg-ui-control-disabled) !important;
}

/* The global small-text rule previously put dark muted text on this accent. */
html[data-kg-theme] .pbHookCard,
html[data-kg-theme] .pbHookCard > span,
html[data-kg-theme] .pbHookCard blockquote,
html[data-kg-theme] .pbHookCard small {
  color: var(--pb-accent-ink) !important;
}

html[data-kg-theme] .pbHookCard small {
  opacity: 0.86;
}

@media (max-width: 850px) {
  html[data-kg-theme] .mainContent > * {
    width: 100% !important;
    max-width: 100% !important;
  }
}

@media print {
  html[data-kg-theme] .mainContent > * {
    width: 100% !important;
    max-width: none !important;
  }
}