:root {
  --danger            : #C73434;
  --info              : #2B6CB0;
  --ok                : #1AA37A;
  --ring              : rgba(181, 148, 114, .35);
  --shadow            : 0 8px 24px rgba(17, 19, 21, .08);
  --surface           : #F7F6F4;
  --surface-2         : #FAF9F7;
  --color-accent      : #B59472;
  --color-accent-dark : #8C6C4A;
  --color-bg          : linear-gradient(180deg, #FAF9F8 0%, #F6F4F2 100%);
  --hero-img          : url("./images/bg.png");
  --color-ink         : #111315;
  --color-muted       : #6E6E6E;
  --color-text        : #222222;
}

/* ===================== RESET ===================== */
* {
  box-sizing : border-box;
  margin     : 0;
  padding    : 0;
}

html {
  font-size : 16px;
}

body {
  background             : var(--color-bg);
  color                  : var(--color-text);
  font-family            : "Noto Sans JP", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  -webkit-font-smoothing : antialiased;
  line-height            : 1.6;
}

a {
  color           : inherit;
  text-decoration : none;
}

img {
  display   : block;
  max-width : 100%;
}

li {
  list-style : none;
}

.serif {
  font-family : "Playfair Display", serif;
}

.container {
  margin : 0 auto;
  width  : min(1200px, 90%);
}