/* SLASHED — core/base.css
   @layer slashed.base
   Element defaults for typography, media, links, tables, and forms.
   Token-first, classless foundation. */

@layer slashed.base {

  html {
    scrollbar-color: var(--sf-scrollbar-thumb) var(--sf-scrollbar-track);
  }

  body {
    margin:           0;
    font-family:      var(--sf-body-font-family, var(--sf-font-body));
    font-size:        var(--sf-body-font-size,   var(--sf-text-m));
    line-height:      var(--sf-body-line-height, var(--sf-leading-normal));
    font-weight:      var(--sf-body-font-weight, var(--sf-font-weight-body));
    color:            var(--sf-body-color,       var(--sf-color-text));
    background-color: var(--sf-color-bg, #fff);
  }

  h1, h2, h3, h4, h5, h6 {
    margin:            0;
    font-family:       var(--sf-heading-font-family, var(--sf-font-heading));
    line-height:       var(--sf-leading-tight);
    color:             var(--sf-heading-color, var(--sf-color-heading));
    text-wrap:         var(--sf-heading-text-wrap);
    overflow-wrap:     break-word;
    text-rendering:    optimizelegibility;
  }

  h1 { font-size: var(--sf-h1-size); line-height: var(--sf-h1-line-height); font-weight: var(--sf-h1-font-weight); letter-spacing: var(--sf-h1-letter-spacing); max-inline-size: var(--sf-h1-max-width); }
  h2 { font-size: var(--sf-h2-size); line-height: var(--sf-h2-line-height); font-weight: var(--sf-h2-font-weight); letter-spacing: var(--sf-h2-letter-spacing); max-inline-size: var(--sf-h2-max-width); }
  h3 { font-size: var(--sf-h3-size); line-height: var(--sf-h3-line-height); font-weight: var(--sf-h3-font-weight); letter-spacing: var(--sf-h3-letter-spacing); max-inline-size: var(--sf-h3-max-width); }
  h4 { font-size: var(--sf-h4-size); line-height: var(--sf-h4-line-height); font-weight: var(--sf-h4-font-weight); letter-spacing: var(--sf-h4-letter-spacing); max-inline-size: var(--sf-h4-max-width); }
  h5 { font-size: var(--sf-h5-size); line-height: var(--sf-h5-line-height); font-weight: var(--sf-h5-font-weight); letter-spacing: var(--sf-h5-letter-spacing); max-inline-size: var(--sf-h5-max-width); }
  h6 { font-size: var(--sf-h6-size); line-height: var(--sf-h6-line-height); font-weight: var(--sf-h6-font-weight); letter-spacing: var(--sf-h6-letter-spacing); max-inline-size: var(--sf-h6-max-width); }

  p {
    margin:        0;
    text-wrap:     var(--sf-body-text-wrap);
    overflow-wrap: break-word;
  }

  b, strong {
    font-weight: var(--sf-body-strong-weight);
  }

  em {
    font-style: var(--sf-body-em-style);
  }

  small {
    font-size: var(--sf-text-s, 0.875em);
  }

  mark {
    background-color: var(--sf-color-mark-bg, Mark);
    color:            var(--sf-color-mark-text, MarkText);
    border-radius:    var(--sf-radius-xs);
    padding-inline:   0.2em;
  }

  abbr[title] {
    text-decoration: underline dotted;
    cursor:          help;
  }

  kbd, samp {
    font-family: var(--sf-font-mono);
    font-size:   inherit;
  }

  sub, sup {
    font-size:      75%;
    line-height:    0;
    position:       relative;
    vertical-align: baseline;
  }
  sup { top:    -0.5em; }
  sub { bottom: -0.25em; }

  /* :link (0,1,1) not bare a: beats WebKit UA rule a:link { color: -webkit-link }
     that silently overrides --sf-color-link in dark mode. */
  a:link {
    color:                   var(--sf-color-link);
    text-decoration-color:   var(--sf-color-link--underline);
    text-underline-offset:   var(--sf-link-underline-offset);
    text-decoration-thickness: var(--sf-link-underline-thickness);
    text-underline-position: from-font;
    transition:
      color                 var(--sf-duration-fast) var(--sf-ease-out),
      text-decoration-color var(--sf-duration-fast) var(--sf-ease-out);
  }
  a:hover   { color: var(--sf-color-link--hover);   text-decoration-color: currentcolor; }
  a:visited { color: var(--sf-color-link--visited); }
  a:active  { color: var(--sf-color-link--active);  }
  a:not([class]) { text-decoration-skip-ink: auto; }

  a, code {
    overflow-wrap: break-word;
  }

  code {
    font-family:      var(--sf-font-mono);
    font-size:        var(--sf-code-font-size);
    padding:          0.125em 0.3em;
    border-radius:    var(--sf-radius-xs);
    background-color: var(--sf-color-code-bg);
    color:            var(--sf-color-code-text, inherit);
  }

  pre {
    font-family:   var(--sf-font-mono);
    font-size:     var(--sf-text-s);
    padding:       var(--sf-space-m);
    border-radius: var(--sf-radius-m);
    background:    var(--sf-color-code-block-bg, var(--sf-color-code-bg));
    color:         var(--sf-color-code-block-text, inherit);
    overflow-x:      auto;
    overflow-inline: auto;
    tab-size:        2;
    hyphens:       none;
  }
  pre code {
    background:    none;
    color:         inherit;
    padding:       0;
    font-size:     inherit;
    border-radius: 0;
  }

  img, picture, video, canvas {
    display:         block;
    max-inline-size: 100%;
    block-size:      auto;
  }

  /* Zero-specificity so .sf-bg-layer, .sf-frame > img, and any component's own
     radius (later layer or higher specificity) always win. */
  :where(img, figure) {
    border-radius: var(--sf-media-radius);
  }

  img, video {
    object-fit:      var(--sf-object-fit);
    object-position: var(--sf-object-position);
  }

  iframe, embed, object {
    display:         block;
    max-inline-size: 100%;
    block-size:      auto;
    border:          none;
  }

  hr {
    border:             none;
    border-block-start: var(--sf-divider-width) var(--sf-divider-style) var(--sf-divider-color);
  }

  ::selection {
    background:  var(--sf-color-selection-bg);
    color:       var(--sf-color-selection-text);
    text-shadow: none;
  }

  th, caption {
    text-align: start;
  }

  input, textarea {
    caret-color: var(--sf-caret-color);
  }

  input, progress {
    accent-color: var(--sf-color-action);
  }

  ::backdrop {
    background-color: var(--sf-color-dim);
  }

  button, input, select, textarea {
    font:           inherit;
    color:          inherit;
    letter-spacing: inherit;
    color-scheme:   inherit;
    line-height:    inherit;
  }
  button {
    cursor: pointer;
  }
  a, button, input, select, textarea, summary {
    touch-action: manipulation;
  }
  textarea {
    resize: vertical;
  }

  optgroup { font: inherit; }
  ::placeholder { opacity: 1; color: var(--sf-color-text--placeholder, currentcolor); }

  blockquote {
    border-inline-start: var(--sf-border-width-3) var(--sf-border-style) var(--sf-color-border);
    padding-inline-start: var(--sf-space-m);
  }

  dt {
    font-weight: var(--sf-font-weight-heading);
  }

  dd {
    margin-inline-start: var(--sf-space-m);
  }

  table {
    text-align: start;
  }

  th {
    font-weight: var(--sf-font-weight-heading);
  }

  td, th {
    padding: var(--sf-space-2xs) var(--sf-space-xs);
    border-block-end: var(--sf-border-width-hairline) var(--sf-border-style) var(--sf-color-border--subtle);
  }

}