/* =========================================================
   83rd Base
   color / concrete / base html / typography
========================================================= */

/* =========================================================
   Design Tokens
========================================================= */

:root {
  --soho-black: #0e0d0a;
  --soho-paper: #c8c6bd;

  --soho-red: #891d21;
  --soho-red-dark: #310b0d;
  --soho-red-deep: #100405;

  --soho-gold: #b48d4b;
  --soho-gold-soft: rgba(180, 141, 75, 0.72);
  --soho-gold-line: rgba(180, 141, 75, 0.18);

  --soho-ink: #1b1a17;
  --soho-ink-soft: rgba(27, 26, 23, 0.82);
  --soho-muted: rgba(27, 26, 23, 0.68);

  --soho-width-full: 100%;
  --soho-width-wide: 1160px;
  --soho-width-standard: 980px;
  --soho-width-narrow: 780px;

  --soho-gap: 32px;

  /* =========================================================
     Concrete Surface
     明るめ灰色 / 黒ずみかなり控えめ / 非POP
  ========================================================= */

  --soho-concrete-base: #a4a59d;
  --soho-concrete-light: #c0c0b7;
  --soho-concrete-dark: #797b73;
  --soho-concrete-deep: #5b5d56;

  --soho-concrete-surface:
    radial-gradient(
      ellipse 40% 22% at 18% 32%,
      rgba(12, 13, 12, 0.08) 0%,
      rgba(12, 13, 12, 0.035) 20%,
      transparent 44%
    ),
    radial-gradient(
      ellipse 34% 22% at 84% 26%,
      rgba(0, 0, 0, 0.07) 0%,
      rgba(0, 0, 0, 0.03) 22%,
      transparent 46%
    ),
    radial-gradient(
      ellipse 38% 24% at 72% 78%,
      rgba(0, 0, 0, 0.075) 0%,
      rgba(0, 0, 0, 0.032) 22%,
      transparent 46%
    ),
    radial-gradient(
      ellipse 30% 20% at 38% 82%,
      rgba(20, 21, 20, 0.06) 0%,
      rgba(20, 21, 20, 0.025) 22%,
      transparent 46%
    ),
    linear-gradient(
      112deg,
      transparent 0%,
      transparent 22%,
      rgba(255, 255, 255, 0.045) 26%,
      transparent 36%,
      transparent 100%
    ),
    linear-gradient(
      36deg,
      transparent 0%,
      transparent 48%,
      rgba(0, 0, 0, 0.045) 54%,
      transparent 66%,
      transparent 100%
    ),
    linear-gradient(
      158deg,
      transparent 0%,
      transparent 36%,
      rgba(255, 255, 255, 0.035) 44%,
      transparent 55%,
      transparent 100%
    ),
    linear-gradient(
      135deg,
      var(--soho-concrete-light) 0%,
      var(--soho-concrete-base) 36%,
      var(--soho-concrete-dark) 74%,
      var(--soho-concrete-deep) 100%
    );

  --soho-font-en: "Trochut", serif;
  --soho-font-ja: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --soho-font-default: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --soho-font-body: var(--soho-font-default);

  --soho-footer-logo-gold-filter:
    brightness(0)
    saturate(100%)
    invert(61%)
    sepia(26%)
    saturate(728%)
    hue-rotate(2deg)
    brightness(88%)
    contrast(88%);
}

/* =========================================================
   Base HTML
========================================================= */

* {
  box-sizing: border-box;
}

html {
  font-size: 16px;
  background: var(--soho-concrete-surface);
  font-family: var(--soho-font-default);
}

body {
  margin: 0;
  color: var(--soho-ink);
  background: var(--soho-concrete-surface);
  font-family: var(--soho-font-default);
}

img {
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
}

/* =========================================================
   Typography
========================================================= */

.en,
[data-font="en"] {
  font-family: var(--soho-font-en);
}

.ja-display,
[data-font="ja-display"] {
  font-family: var(--soho-font-ja);
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-weight: 400;
}

.soho-heading-en {
  font-family: var(--soho-font-en);
  letter-spacing: 0.04em;
}

.soho-heading-ja {
  font-family: var(--soho-font-ja);
  letter-spacing: 0.04em;
}