/*
 * Base Styles
 * Element-level defaults
 */

@layer base {
  html {
    font-family: var(--font-sans);
    font-weight: var(--weight-regular);
    color: var(--color-ink);
    background-color: var(--color-canvas);
  }

  body {
    font-size: var(--text-normal);
    line-height: 1.6;
  }

  /* Headings */
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-weight: var(--weight-regular);
    line-height: 1.2;
  }

  h1 { font-size: var(--text-xx-large); }
  h2 { font-size: var(--text-x-large); }
  h3 { font-size: var(--text-large); }
  h4 { font-size: var(--text-medium); }

  /* Links */
  a:not([class]) {
    color: var(--color-primary);
    text-decoration: underline;
    text-decoration-skip-ink: auto;
    transition: color var(--duration-fast);

    &:hover {
      color: var(--color-primary-hover);
    }
  }

  /* Code */
  code,
  pre {
    font-family: var(--font-mono);
    font-size: 0.9em;
  }

  /* Selection */
  ::selection {
    background: color-mix(in srgb, var(--color-primary) 15%, transparent);
  }

  /* Lists with role="list" */
  :where(ul, ol):where([role="list"]) {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  /* Keyboard */
  kbd {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    box-shadow: 0 1px 0 var(--color-border);
    font-family: var(--font-mono);
    font-size: 0.8em;
    padding-inline: 0.4em;
    white-space: nowrap;
  }

  /* Turbo */
  turbo-frame {
    display: contents;
  }

  .turbo-progress-bar {
    background-color: var(--color-primary);
  }
}