:root {
  --oc-navbar-height: 72px;
  --oc-mobile-navbar-height: 60px;
  --oc-visible-viewport-height: 100vh;
  --oc-app-modal-z-index: 3000;
  --oc-app-modal-child-z-index: 3100;

  /* Warning semantic tokens — amber theme for caution messages.
     Keep in sync with OS_LEGAL_COLORS in osLegalStyles.ts. */
  --oc-warning-surface: #fefce8;
  --oc-warning-border: #fde68a;
  --oc-warning-text: #854d0e;

  /* Info semantic tokens — blue theme for informational messages.
     Keep in sync with OS_LEGAL_COLORS in osLegalStyles.ts. */
  --oc-info-surface: #f0f9ff;
  --oc-info-border: #bae6fd;
  --oc-info-text: #0369a1;

  /* TODO: Add dark-mode overrides for warning/info tokens via
     @media (prefers-color-scheme: dark) { :root { ... } } */
}

@supports (height: 100dvh) {
  :root {
    --oc-visible-viewport-height: 100dvh;
  }
}

@media (max-width: 1100px) {
  :root {
    --oc-navbar-height: var(--oc-mobile-navbar-height);
  }
}

/* Global box-sizing reset. Without this, any `width: 100%` element with
   horizontal padding/border overflows its container by the padding amount
   (e.g. the site footer extended 32px past the viewport on mobile, and the
   thread search input ran off-screen). `inherit` lets a subtree opt out if
   it ever genuinely needs content-box. */
html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

body {
  margin: 0;
  overflow-x: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html {
  scroll-behavior: smooth;
}

/* Ensure percentage heights resolve throughout the app */
html,
body,
#root {
  height: 100%;
  min-height: 100%;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
    monospace;
}
