@layer base {
  *, *::before, *::after { box-sizing: border-box; }
  html, body { margin:0; padding:0; }
  /* Bind color-scheme to the explicit app theme so native form controls
     (select dropdown lists, scrollbars, date pickers) match regardless of
     the OS dark-mode preference. */
  html { color-scheme: light; }
  html[data-theme="dark"] { color-scheme: dark; }
  h1, h2, h3, h4, h5, h6 { margin: 0; font-family: var(--da-font-display); font-weight: 700; letter-spacing: -0.015em; color: var(--da-text); }
  h1 { font-size: var(--da-text-4xl); line-height: 1.1; }
  h2 { font-size: var(--da-text-2xl); line-height: 1.2; }
  h3 { font-size: var(--da-text-xl); line-height: 1.25; }
  p { margin: 0; }
  a { color: var(--da-primary); text-decoration: none; }
  a:hover { text-decoration: underline; }
  button, input, select, textarea { font: inherit; color: inherit; }
  code, pre, .tabular { font-family: var(--da-font-mono); font-variant-numeric: tabular-nums; }
  .num { font-variant-numeric: tabular-nums; font-weight: 500; }
  ::selection { background: color-mix(in srgb, var(--da-primary) 25%, transparent); color: var(--da-text); }
}

/* Unlayered — must win over Bootstrap's own body styling */
html, body {
  min-height: 100vh;
  background-color: var(--da-bg) !important;
  color: var(--da-text);
  font-family: var(--da-font-sans);
  font-size: var(--da-text-base);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* Kill default Bootstrap <a> underline. Color inherits from parent unless explicit. */
a { text-decoration: none !important; color: inherit; }
a:hover { text-decoration: none !important; }
/* Links outside of da-* scoped areas use primary color */
p a, li a, article a { color: var(--da-primary); }