/* Document-level defaults. This file is linked late for compatibility, but
   belongs to the base layer rather than the component cascade. */
@layer base {
  html,
  body {
    background: var(--bg-primary);
  }

  html {
    -webkit-text-size-adjust: 100%;
  }

  html[data-theme="light"] {
    color-scheme: light;
  }

  html[data-theme="light"][data-theme-preference="light"] {
    color-scheme: only light;
  }

  html[data-theme="dark"] {
    color-scheme: dark;
  }

  body {
    color: var(--text-primary);
    -webkit-tap-highlight-color: color-mix(in srgb, var(--text-accent) 22%, transparent);
  }

  :where(a, a:link, a:any-link) {
    color: var(--link-color, var(--text-accent));
    -webkit-text-fill-color: currentColor;
    text-decoration-color: color-mix(in srgb, currentColor 64%, transparent);
    text-underline-offset: 0.16em;
  }

  :where(a:visited) {
    color: var(--link-visited, var(--link-color, var(--text-accent)));
    -webkit-text-fill-color: currentColor;
  }

  :where(a:hover) {
    color: var(--link-hover, var(--highlight));
    text-decoration-color: currentColor;
  }

  :where(a:active) {
    color: var(--link-active, var(--link-hover, var(--highlight)));
  }

  :where(a:focus-visible) {
    outline: 2px solid var(--input-focus-border, var(--highlight));
    outline-offset: 3px;
  }

  :where(nav a, .gnostic-card a, .btn, .hero-cta-button):visited {
    color: inherit;
    -webkit-text-fill-color: currentColor;
  }

  :where(.btn, .hero-cta-button):focus-visible {
    outline-color: var(--input-focus-border, var(--highlight));
  }

  :where(button, input, select, textarea) {
    font: inherit;
    color-scheme: inherit;
  }

  :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
    background-color: var(--input-bg);
    color: var(--input-text);
    border-color: var(--input-border);
  }

  :where(select) {
    -webkit-appearance: menulist;
    appearance: auto;
  }

  :where(input[type="checkbox"], input[type="radio"]) {
    accent-color: var(--text-accent);
  }

  :where(input::placeholder, textarea::placeholder) {
    color: var(--input-placeholder);
    opacity: 1;
  }

  :where(input:disabled, select:disabled, textarea:disabled, button:disabled) {
    color: var(--input-disabled-text);
    cursor: not-allowed;
  }

  :where(input:disabled, select:disabled, textarea:disabled) {
    background-color: var(--input-disabled-bg);
    border-color: var(--divider-border-soft, var(--input-border));
    -webkit-text-fill-color: var(--input-disabled-text);
    opacity: 1;
  }

  :where(input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill) {
    -webkit-text-fill-color: var(--input-text);
    caret-color: var(--input-text);
    box-shadow: 0 0 0 1000px var(--input-bg) inset;
    border-color: var(--input-border);
  }

  :where(hr, .gnostic-divider, .page-tabs, table, thead, tbody, tfoot) {
    border-color: var(--divider-border, var(--section-border));
  }
}