/* Silence Laboratories Decibel (dB) design system tokens.
 * Light is the default; dark mode activates via <html data-theme="dark">
 * (set by the theme toggle or the OS preference script). */
:root {
  --db-background: #FFFFFF;
  --db-foreground: #162235;
  --db-card: #FFFFFF;
  --db-popover: #FFFFFF;
  --db-primary: #184691;
  --db-primary-foreground: #FFFFFF;
  --db-secondary: #EBF0F9;
  --db-secondary-foreground: #0D2141;
  --db-muted: #F4F5F7;
  --db-muted-foreground: #606A79;
  --db-accent: #F2F3F6;
  --db-border: #E3E6EB;
  --db-input: #E3E6EB;
  --db-ring: #184691;
  --db-sidebar: #F9FAFC;
  --db-sidebar-foreground: #162235;
  --db-sidebar-accent: #F2F3F6;
  --db-sidebar-border: #E3E6EB;
  --db-code-bg: #F4F5F7;
  --db-link: #184691;

  --db-chart-1: #001760;
  --db-chart-2: #05357E;
  --db-chart-3: #4070BF;
  --db-chart-4: #7BAEFF;

  --db-radius-xs: 2px;
  --db-radius-sm: 0px;
  --db-radius-md: 0px;
  --db-radius-xl: 4px;

  --db-font-sans: "Stack Sans Text", system-ui, -apple-system, "Segoe UI", sans-serif;
  --db-font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  color-scheme: light;
}

[data-theme="dark"] {
  --db-background: #080B11;
  --db-foreground: #F8F8F8;
  --db-card: #0C1015;
  --db-popover: #0E1217;
  --db-primary: #184691;
  --db-primary-foreground: #FFFFFF;
  --db-secondary: #2F5EAB;
  --db-secondary-foreground: #A9DFFF;
  --db-muted: #1F2226;
  --db-muted-foreground: #A7AEBB;
  --db-accent: #3E4349;
  --db-border: #292B30;
  --db-input: #292B30;
  --db-ring: #2F5EAB;
  --db-sidebar: #030407;
  --db-sidebar-foreground: #F8F8F8;
  --db-sidebar-accent: #1D1F24;
  --db-sidebar-border: #292B30;
  --db-code-bg: #0C1015;
  --db-link: #7BAEFF;

  --db-chart-1: #05357E;
  --db-chart-2: #4070BF;
  --db-chart-3: #7BAEFF;
  --db-chart-4: #A9DFFF;

  color-scheme: dark;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--db-font-sans);
  background: var(--db-background);
  color: var(--db-foreground);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--db-link); text-decoration: none; }
a:hover { text-decoration: underline; }

code, pre, kbd { font-family: var(--db-font-mono); }

::selection { background: var(--db-secondary); color: var(--db-secondary-foreground); }

/* Shared Decibel primitives ------------------------------------------------ */

.db-eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--db-muted-foreground);
}

.db-h1 {
  font-size: 36px;
  line-height: 40px;
  font-weight: 600;
  letter-spacing: -0.9px;
}
@media (min-width: 768px) {
  .db-h1 { font-size: 48px; line-height: 48px; letter-spacing: -1.2px; }
}

.db-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: var(--db-radius-md);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
}
.db-btn:hover { text-decoration: none; }

.db-btn-primary { background: var(--db-primary); color: var(--db-primary-foreground); }
.db-btn-primary:hover { background: var(--db-chart-2); }

.db-btn-outline {
  background: transparent;
  color: var(--db-foreground);
  border-color: var(--db-border);
}
.db-btn-outline:hover { background: var(--db-accent); }

.db-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border: 1px solid var(--db-border);
  border-radius: var(--db-radius-md);
  font-size: 12px;
  font-weight: 500;
  color: var(--db-muted-foreground);
  background: var(--db-background);
}
.db-badge-solid {
  background: var(--db-primary);
  border-color: var(--db-primary);
  color: var(--db-primary-foreground);
}

.db-card {
  display: block;
  background: var(--db-card);
  border: 1px solid var(--db-border);
  border-radius: var(--db-radius-xl);
  box-shadow: 0 1px 2px rgba(5, 23, 96, 0.05);
  color: inherit;
  text-decoration: none;
  transition: border-color 120ms ease;
}
.db-card:hover { border-color: var(--db-chart-3); text-decoration: none; }

/* Theme toggle (text-only; the brand system carries no emoji) */
.db-theme-toggle {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  background: var(--db-background);
  color: var(--db-foreground);
  border: 1px solid var(--db-border);
  border-radius: var(--db-radius-md);
  font-family: var(--db-font-sans);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}
.db-theme-toggle:hover { background: var(--db-accent); }

/* Syntax highlighting for doc2go's chroma spans, tuned to the dB blue ramp. */
.chroma { color: var(--db-foreground); background-color: transparent; }
.chroma .k, .chroma .kd, .chroma .kn, .chroma .kt, .chroma .kc { color: var(--db-chart-2); font-weight: 600; }
.chroma .nx, .chroma .nc, .chroma .nf { color: var(--db-chart-3); }
.chroma .s, .chroma .s1, .chroma .s2 { color: #1F7A4D; }
.chroma .c, .chroma .c1, .chroma .cm { color: var(--db-muted-foreground); font-style: italic; }
.chroma .o { color: var(--db-foreground); }
.chroma .p { color: var(--db-foreground); }
.chroma .m, .chroma .mi, .chroma .il { color: var(--db-chart-1); }
.chroma .na, .chroma .nt { color: var(--db-chart-3); }
.chroma .l { color: var(--db-chart-2); }
.chroma .err { color: #B3261E; }

[data-theme="dark"] .chroma .k, [data-theme="dark"] .chroma .kd,
[data-theme="dark"] .chroma .kn, [data-theme="dark"] .chroma .kt,
[data-theme="dark"] .chroma .kc { color: var(--db-chart-3); }
[data-theme="dark"] .chroma .nx, [data-theme="dark"] .chroma .nc,
[data-theme="dark"] .chroma .nf { color: var(--db-chart-4); }
[data-theme="dark"] .chroma .s, [data-theme="dark"] .chroma .s1,
[data-theme="dark"] .chroma .s2 { color: #8FD9A8; }
[data-theme="dark"] .chroma .m, [data-theme="dark"] .chroma .mi,
[data-theme="dark"] .chroma .il { color: var(--db-chart-4); }
[data-theme="dark"] .chroma .na, [data-theme="dark"] .chroma .nt { color: var(--db-chart-4); }
[data-theme="dark"] .chroma .l { color: var(--db-chart-4); }
[data-theme="dark"] .chroma .err { color: #FF5B5B; }