/* dpc-base.css — element-level defaults using tokens. Load order: 3rd. */

html {
  font-size: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--dpc-header-height) + var(--dpc-space-4));
}

body {
  font-family: var(--dpc-font-sans);
  font-size: var(--dpc-font-base);
  line-height: var(--dpc-leading-normal);
  color: var(--dpc-text-primary);
  background-color: var(--dpc-bg-primary);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: var(--dpc-leading-tight);
  font-weight: var(--dpc-font-bold);
  color: var(--dpc-text-primary);
}

h1 {
  font-size: var(--dpc-font-4xl);
}

h2 {
  font-size: var(--dpc-font-3xl);
}

h3 {
  font-size: var(--dpc-font-2xl);
}

h4 {
  font-size: var(--dpc-font-xl);
}

h5 {
  font-size: var(--dpc-font-lg);
}

h6 {
  font-size: var(--dpc-font-md);
}

p {
  color: var(--dpc-text-secondary);
  line-height: var(--dpc-leading-relaxed);
}

a {
  color: var(--dpc-accent);
  transition: color var(--dpc-transition);
}

a:hover {
  color: var(--dpc-accent-hover);
  text-decoration: underline;
}

strong {
  font-weight: var(--dpc-font-bold);
  color: var(--dpc-text-primary);
}

ul,
ol {
  color: var(--dpc-text-secondary);
  line-height: var(--dpc-leading-relaxed);
}

label {
  font-weight: var(--dpc-font-medium);
  color: var(--dpc-text-primary);
}

input,
select,
textarea {
  font-family: inherit;
  font-size: var(--dpc-font-md);
  color: var(--dpc-text-primary);
  background-color: var(--dpc-bg-primary);
  border: 1px solid var(--dpc-border);
  border-radius: var(--dpc-radius-md);
  padding: var(--dpc-space-3) var(--dpc-space-4);
  width: 100%;
}

input:focus,
select:focus,
textarea:focus,
button:focus-visible,
a:focus-visible,
summary:focus-visible {
  outline: 2px solid transparent;
  outline-offset: var(--dpc-focus-ring-offset);
  box-shadow: var(--dpc-focus-ring);
  border-radius: var(--dpc-radius-sm);
}

caption {
  text-align: left;
  color: var(--dpc-text-muted);
  font-size: var(--dpc-font-sm);
  padding-bottom: var(--dpc-space-2);
}

th,
td {
  text-align: left;
  padding: var(--dpc-space-3) var(--dpc-space-4);
  border-bottom: 1px solid var(--dpc-border-light);
  vertical-align: top;
}

th {
  font-weight: var(--dpc-font-medium);
  color: var(--dpc-text-primary);
  background-color: var(--dpc-bg-secondary);
}

figure {
  margin: 0;
}

figcaption {
  font-size: var(--dpc-font-sm);
  color: var(--dpc-text-muted);
  padding-top: var(--dpc-space-2);
}

code,
kbd {
  font-family: var(--dpc-font-mono);
  font-size: 0.9em;
}