/*
  projectsBase base.css
  - タイポグラフィと基本タグの定義
  - assets/css/base/reset.css → tokens.css → base.css の順で読み込んでください
*/

html {
  text-size-adjust: 100%;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    "Helvetica Neue", "Hiragino Kaku Gothic ProN", "Hiragino Sans",
    "Noto Sans JP", sans-serif;
  font-size: var(--font-size-base);
  line-height: var(--line-height-relaxed);
  font-weight: var(--font-weight-normal);
  color: var(--color-text);
  background-color: var(--color-bg);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color-scheme: light dark;
}

body {
  min-height: 100vh;
  margin: 0;
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: inherit;
  font-size: 1rem;
  line-height: inherit;
  word-break: break-word;
  overflow-wrap: break-word;
}

*, *::before, *::after {
  box-sizing: inherit;
}

p {
  margin: 0 0 1.25em;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0 0 0.9em;
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
}

h1 {
  font-size: clamp(2.4rem, 2.1rem + 1.3vw, 3.8rem);
}

h2 {
  font-size: clamp(2rem, 1.8rem + 1.1vw, 3.2rem);
}

h3 {
  font-size: clamp(1.7rem, 1.6rem + 0.9vw, 2.6rem);
}

h4 {
  font-size: 1.25rem;
}

h5 {
  font-size: 1.1rem;
}

h6 {
  font-size: 1rem;
}

a {
  color: var(--color-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: color var(--transition-fast);

  &:hover,
  &:focus-visible {
    color: var(--color-link-hover);
  }
}

ul,
ol {
  margin: 0 0 1.25em 1.5em;
  padding: 0;
}

ul {
  list-style: disc;
}

ol {
  list-style: decimal;
}

li {
  margin: 0.35em 0;
}

figure {
  margin: 0 0 1.25em;
}

figcaption {
  font-size: 0.875rem;
  color: var(--color-muted);
  margin-top: 0.5em;
}

blockquote {
  margin: 0 0 1.25em;
  padding-left: 1em;
  border-left: 0.3em solid var(--color-border);
  color: var(--color-muted);
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

pre {
  margin: 0 0 1.25em;
  padding: 1em;
  overflow: auto;
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
}

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1.25em;

  th,
  td {
    padding: 0.75em 1em;
    border: 1px solid var(--color-border);
    text-align: left;
  }
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
  background-color: var(--color-bg);
}

input,
select,
textarea {
  border: 1px solid var(--color-border);
  padding: var(--sp-sm);
  border-radius: var(--radius-sm);
}

input[type="checkbox"],
input[type="radio"] {
  vertical-align: middle;
  margin: 0 var(--sp-xs) 0 0;
}

label {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

button,
[type="button"],
[type="reset"],
[type="submit"] {
  cursor: pointer;
}

fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

legend {
  padding: 0;
}

::selection {
  background-color: var(--color-selection);
  color: inherit;
}

:focus-visible {
  outline: var(--focus-outline-width) solid var(--focus-outline-color);
  outline-offset: var(--focus-outline-offset);
}

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