/* System appearance for the directory and Inspector pages. Product media keeps
   its original pixels; only the surrounding reading and control surfaces adapt. */
:root {
  color-scheme: light dark;
  --footer-text: oklch(0.52 0.025 260);
}

.site-footer {
  color: var(--footer-text);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: oklch(0.18 0.006 260);
    --surface: oklch(0.23 0.007 260);
    --surface-soft: oklch(0.28 0.008 260);
    --surface-hover: oklch(0.32 0.009 260);
    --text: oklch(0.94 0.004 260);
    --muted: oklch(0.74 0.012 260);
    --footer-text: var(--muted);
    --border: oklch(0.39 0.012 260);
    --link: oklch(0.79 0.1 252);
    --shadow: 0 1px 3px oklch(0.1 0.004 260 / 0.16);
    --header-paper: oklch(0.2 0.007 260 / 0.96);
    --primary-paper: oklch(0.92 0.005 260);
    --primary-ink: oklch(0.2 0.007 260);
  }

  .site-header--light {
    background: var(--header-paper);
    border-color: var(--border);
  }

  .site-header--light a,
  .site-header--light .lang-switch button,
  .site-footer,
  .site-footer-links a {
    color: var(--muted);
  }

  .site-header--light a:hover,
  .site-header--light a[aria-current='page'],
  .site-footer-links a:hover {
    color: var(--text);
  }

  .site-header--light .lang-switch,
  .policy-meta span,
  .quick-actions a,
  .quick-links a,
  .btn:not(.btn-primary) {
    background: var(--surface-soft);
    border-color: var(--border);
    color: var(--text);
  }

  .site-header--light .lang-switch button[data-active='true'],
  .btn-primary {
    background: var(--primary-paper);
    border-color: var(--primary-paper);
    color: var(--primary-ink);
  }

  .btn-primary:hover {
    background: var(--text);
  }

  .quick-links a:hover,
  .quick-links a:active,
  .quick-actions a:hover,
  .tool-card-actions a:hover,
  .btn:not(.btn-primary):hover {
    background: var(--surface-hover);
  }

  .tool-card:hover {
    border-color: var(--link);
    box-shadow: var(--shadow);
  }

  .tool-card-arrow {
    color: var(--muted);
    border-color: var(--border);
  }

  .policy-card {
    box-shadow: var(--shadow);
  }

  a:focus-visible,
  button:focus-visible {
    outline: 2px solid var(--link);
    outline-offset: 3px;
  }
}

/* Public component roles; shared geometry lives in product-chrome.css. */
.ktb-footer{--ktb-ink:var(--text);--ktb-muted:var(--muted);--ktb-line:var(--border);--ktb-width:960px;--ktb-gutter:1.25rem}