/* @global/style.css */
@layer reset, vendor, global, layout, components;

@layer reset {
  body {
    margin: 0;
    padding-inline: .5em;
    font-family: system-ui, sans-serif;
    font-size: 12pt;
    font-feature-settings: "liga" 1, "calt" 1;
    font-synthesis: none;
  }

  summary {
    cursor: pointer;
  }
}

@layer global {
  :root {
    --back: #eee;
    --soft: #fff;
    --edge: #999;
    --mute: #555;
    --link: oklch(.546 .245 262.881);
  }

  @media (prefers-color-scheme: dark) {
    :root {
      --back: #000;
      --soft: #333;
      --edge: #aaa;
      --mute: #ddd;
      --link: oklch(.882 .059 254.128);
    }
  }

  body {
    max-width: 800px;
    margin-inline: auto;
    background-color: var(--back);
    font-variation-settings: "ital" 0;
  }

  a {
    color: var(--link);
  }

  b {
    font-weight: 700;
  }

  :where(em, i) {
    font-variation-settings: "ital" 1;
  }

  table {
    margin-inline: auto;
  }

  td {
    padding-inline: 1ch;
  }
}

@layer components {
  .font-list {
    padding: 0;
    list-style-type: none;
  }

  .font {
    margin-block: .5em;
    background-color: var(--soft);
    border: 1px solid var(--edge);
  }

  .font__summary {
    display: grid;
    grid-template-columns: 16em 1fr;
    grid-column: 1 / -1;
    padding: 0 .7em;
    line-height: 40px;
  }

  .font__summary :is(h2, p) {
    margin: 0;
    font-size: 14pt;
    font-weight: 400;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  [open] .font__summary {
    color: canvas;
    background-color: canvastext;
  }

  .font__content {
    padding-inline: 1em;
    font-size: 12pt;
    line-height: 1.5;
    font-size-adjust: .5;
  }

  .font__content p, .font__content ul {
    grid-column: 1 / -1;
    margin-block: 1em;
  }

  .font__tags {
    font-size: 10pt;
    color: var(--mute);
  }
}

#inter {
  font-feature-settings: "ss01" on, "ss04" on;
}