:root {
  --font-sans: "Sora", "IBM Plex Sans", "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;

  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 14px;

  --btn-radius: var(--radius-md);
  --btn-height: 40px;
  --btn-font-size: 0.875rem;
  --btn-font-weight: 600;
  --btn-pad-x: 16px;
  --btn-letter: -0.01em;

  --bg: #f3f4f6;
  --surface: #ffffff;
  --surfaceMuted: #eceff3;
  --surfaceToolbar: #ffffff;
  --surfaceElevated: #ffffff;
  --text: #1b1b1b;
  --textMuted: #5f5a52;
  --border: #d9dee5;
  --borderSubtle: #c7ced8;
  --link: #5d4f3a;
  --accent: #5d4f3a;
  --accentHover: #5d4f3a;
  --danger: #b43a2f;
  --focus: #2f2a23;
  --brandTint: rgba(93, 79, 58, 0.12);
  --brandLine: rgba(93, 79, 58, 0.45);
  --railTint: rgba(93, 79, 58, 0.08);

  --secondaryBg: #eceff3;
  --secondaryHover: #e3e8ee;
  --secondaryText: #1b1b1b;
  --secondaryBorder: color-mix(in srgb, var(--border) 82%, var(--text) 18%);

  --btn-primary-bg: #5d4f3a;
  --btn-primary-hover: #5d4f3a;
  --btn-primary-active: #5d4f3a;
  --btn-primary-fg: #f8f7f3;
  --btn-primary-border: color-mix(in srgb, #5d4f3a 88%, #f8f7f3 12%);

  --btn-secondary-bg: #ffffff;
  --btn-secondary-hover: #f6f8fa;
  --btn-secondary-active: #eceff3;
  --btn-secondary-fg: #1b1b1b;
  --btn-secondary-border: color-mix(in srgb, var(--border) 58%, var(--text) 42%);

  --shadowSm: 0 1px 2px rgba(47, 42, 35, 0.05), 0 1px 3px rgba(47, 42, 35, 0.08);
  --shadowMd: 0 8px 24px rgba(47, 42, 35, 0.1);

  --errorBg: #fff1f0;
  --errorBorder: #f7ccc8;
  --errorText: #8f2d23;
  --infoBg: #edf3fc;
  --infoBorder: #b8cff5;
  --infoText: #1a4a8c;
  --warnBg: #fff8e5;
  --warnBorder: #f4dca3;
  --warnText: #6f5200;

  --code-inline-bg: #eef2f6;
  --code-inline-border: #d8dee7;
  --code-block-bg: #f5f7fa;
  --code-block-border: #dce2ea;

  /* Sticky sidebars / rails sit below `.docsUtilityBar` (developer portal + static docs). */
  --docs-sticky-rail-top: 70px;

  /* Sign-in hero grid + comet-trace background (see .hero-bg in
     developers/src/styles.css and HeroGridBackground.tsx). Ported from
     agnts.social's landing page, which in turn ported it from
     cliftonhatfield.com. `--grid-accent` aliases the portal's own `--accent`
     rather than a hardcoded hex, so it tracks this theme's brown/gold accent
     (not landing's brick red) without a per-theme override; `--hero-glow`
     aliases the existing `--brandTint` token for the same reason. `--grid-line`
     and `--grid-accent-hot` are accent-independent (a neutral grid + a
     darker/lighter comet head for contrast against the page background) so
     they're set directly, matching landing's own light/dark values where
     the accent hue doesn't matter. */
  --grid-accent: var(--accent);
  --grid-line: #9aa4b2;
  --grid-opacity: 0.8;
  --grid-accent-hot: #2f2a23;
  --hero-glow: var(--brandTint);
}

html[data-theme="dark"] {
  --bg: #181b21;
  --surface: #1c1f26;
  --surfaceMuted: #20232c;
  --surfaceElevated: #20232c;
  --surfaceToolbar: #1c1f26;
  --text: #ffffff;
  --textMuted: #e8ebf0;
  --border: #2a2f38;
  --borderSubtle: #343b4a;
  --link: #ff4d4d;
  --accent: #ff4d4d;
  --accentHover: #ff4d4d;
  --danger: #ff9f96;
  --focus: #ff4d4d;
  --brandTint: rgba(255, 77, 77, 0.14);
  --brandLine: rgba(255, 77, 77, 0.5);
  --railTint: rgba(255, 77, 77, 0.12);

  --secondaryBg: rgba(255, 255, 255, 0.06);
  --secondaryHover: rgba(255, 255, 255, 0.1);
  --secondaryText: #ffffff;
  --secondaryBorder: color-mix(in srgb, var(--border) 80%, var(--text) 20%);

  --btn-primary-bg: #ff4d4d;
  --btn-primary-hover: #ff4d4d;
  --btn-primary-active: #ff4d4d;
  --btn-primary-fg: #ffffff;
  --btn-primary-border: color-mix(in srgb, #ff4d4d 68%, #ffffff 32%);

  --btn-secondary-bg: transparent;
  --btn-secondary-hover: rgba(255, 255, 255, 0.06);
  --btn-secondary-active: rgba(255, 255, 255, 0.1);
  --btn-secondary-fg: #ffffff;
  --btn-secondary-border: color-mix(in srgb, var(--border) 72%, var(--text) 28%);

  --shadowSm: 0 1px 2px rgba(0, 0, 0, 0.35), 0 1px 3px rgba(0, 0, 0, 0.22);
  --shadowMd: 0 8px 28px rgba(0, 0, 0, 0.4);

  --errorBg: #3a1f22;
  --errorBorder: #6d2d32;
  --errorText: #ffbeb8;
  --infoBg: #1c2e46;
  --infoBorder: #2f4d72;
  --infoText: #bcd8ff;
  --warnBg: #3a311b;
  --warnBorder: #6b5a2f;
  --warnText: #f8dfa4;

  --code-inline-bg: #1d2634;
  --code-inline-border: #334257;
  --code-block-bg: #0b111a;
  --code-block-border: #2a3748;

  /* Dark-theme grid-trace values match agnts.social's landing page exactly —
     its dark `--accent` (#ff4d4d) is already this portal's dark `--accent`. */
  --grid-line: #343b4a;
  --grid-opacity: 0.34;
  --grid-accent-hot: #ffe1e1;
}

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

html,
body {
  min-height: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  line-height: 1.5;
}

a {
  color: var(--link);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.12em;
}

a:hover {
  color: color-mix(in srgb, var(--link) 82%, var(--accent) 18%);
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

code,
pre,
.monoValue {
  font-family: var(--font-mono);
}