@layer base {
/* =============================================================================
   @elements/style — base (inside @layer base)

   Default styling for bare HTML elements. No :where() needed — the cascade
   layer puts these BELOW components and utilities, so any class or utility
   wins automatically.

   Native widgets (progress, meter, details) live in native.css.
============================================================================= */

html {
  font-family:    var(--font-sans);
  line-height:    var(--leading-body);
  color:          var(--ink);
  background:     var(--bg);
}

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

/* HEADINGS — generous, modern scale ------------------------------------ */

h1 {
  font-size:      var(--text-4xl);
  font-weight:    var(--weight-semibold);
  line-height:    var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color:          var(--ink);
}

h2 {
  font-size:      var(--text-3xl);
  font-weight:    var(--weight-semibold);
  line-height:    var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color:          var(--ink);
}

h3 {
  font-size:      var(--text-2xl);
  font-weight:    var(--weight-semibold);
  line-height:    var(--leading-tight);
  letter-spacing: var(--tracking-snug);
  color:          var(--ink);
}

h4 {
  font-size:      var(--text-xl);
  font-weight:    var(--weight-semibold);
  line-height:    var(--leading-snug);
  color:          var(--ink);
}

h5 {
  font-size:      var(--text-lg);
  font-weight:    var(--weight-semibold);
  line-height:    var(--leading-snug);
  color:          var(--ink);
}

h6 {
  font-size:      var(--text-base);
  font-weight:    var(--weight-semibold);
  line-height:    var(--leading-snug);
  color:          var(--ink);
}

/* PARAGRAPH */
p {
  color:       var(--ink);
  line-height: var(--leading-body);
}

/* LINKS — wrapped in :where() so component classes (.button, .link-action,
   etc.) can override without specificity battles inside the same layer too. */
:where(a) {
  color:                  var(--accent-deep);
  text-decoration:        underline;
  text-decoration-color:  color-mix(in oklab, currentColor 30%, transparent);
  text-underline-offset:  0.25em;
  transition:             var(--transition-colors);
}
:where(a:hover) { text-decoration-color: currentColor; }
:where(a:focus-visible) {
  outline:        none;
  box-shadow:     var(--focus-ring);
  border-radius:  var(--radius-xs);
}

/* LISTS — bare have no markers; .prose opts back in */
li { line-height: var(--leading-body); }
dt { font-weight: var(--weight-semibold); color: var(--ink); }
dd { color: var(--ink-soft); }

/* QUOTE / HR */
blockquote {
  padding-left: var(--space-4);
  border-left:  3px solid var(--rule);
  color:        var(--ink-soft);
  font-style:   italic;
}
hr {
  border: none;
  border-top: 1px solid var(--rule);
}

/* CODE */
code {
  font-family:   var(--font-mono);
  font-size:     0.92em;
  background:    var(--bg-muted);
  color:         var(--ink);
  padding:       0.15em 0.4em;
  border-radius: var(--radius-xs);
}
pre {
  font-family:   var(--font-mono);
  font-size:     var(--text-sm);
  line-height:   var(--leading-snug);
  background:    var(--bg-inverse);
  color:         var(--ink-inverse);
  padding:       var(--space-4);
  border-radius: var(--radius-surface);
  overflow-x:    auto;
  tab-size:      2;
}
pre code {
  background:    transparent;
  padding:       0;
  font-size:     inherit;
  color:         inherit;
  border-radius: 0;
}

/* KBD */
kbd {
  display:       inline-block;
  font-family:   var(--font-mono);
  font-size:     0.85em;
  background:    var(--bg-muted);
  color:         var(--ink);
  padding:       0.15em 0.45em;
  border:        1px solid var(--rule);
  border-radius: var(--radius-xs);
  box-shadow:    0 1px 0 var(--rule);
}

/* MARK */
mark {
  background:    var(--warning-soft);
  color:         var(--warning-ink);
  padding:       0 0.1em;
  border-radius: var(--radius-xs);
}

/* TABLES */
table {
  width:           100%;
  font-size:       var(--text-sm);
  line-height:     var(--leading-snug);
  color:           var(--ink);
  border-collapse: collapse;
}
thead { border-bottom: 1px solid var(--rule); }
tbody tr + tr { border-top: 1px solid var(--rule-soft); }
th {
  text-align:  left;
  font-weight: var(--weight-semibold);
  color:       var(--ink-soft);
  padding:     var(--space-2) var(--space-3);
}
td {
  padding:        var(--space-2) var(--space-3);
  vertical-align: top;
}

figcaption {
  font-size:  var(--text-sm);
  color:      var(--ink-soft);
  margin-top: var(--space-2);
}

::selection {
  background: color-mix(in oklab, var(--accent) 22%, transparent);
  color:      var(--ink);
}

}