/* =========================================================
   ROOTIVE - base.css
   リセット / デザイントークン / タイポグラフィ基盤
   ========================================================= */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
img, picture, svg, video { display: block; max-width: 100%; height: auto; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
table { border-collapse: collapse; width: 100%; }
:focus-visible { outline: 2px solid var(--ember); outline-offset: 3px; }

/* ---------- Design Tokens ---------- */
:root {
  /* Color - コーポレートカラー(白/黒)を基盤にしたモノクロ */
  --ink:      #0b0b0c;   /* 基調の黒 */
  --coal:     #141416;   /* 黒セクションの繰り返し用 */
  --graphite: #1d1d20;   /* カード面 */
  --paper:    #f4f2ec;   /* 温かみのある白 */
  --cloud:    #e7e4db;   /* 白セクションの面 */
  --white:    #ffffff;
  --muted-d:  rgba(255,255,255,.62); /* 暗背景の補助テキスト */
  --muted-l:  rgba(11,11,12,.60);    /* 明背景の補助テキスト */
  --line-d:   rgba(255,255,255,.14);
  --line-l:   rgba(11,11,12,.14);
  /* アクセント: 代表写真の夕陽に由来する琥珀。ごく控えめに使用 */
  --ember:    #c8933f;
  --ember-soft: rgba(200,147,63,.16);

  /* Type */
  --f-display: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif;
  --f-body:    "Noto Sans JP", sans-serif;
  --f-en:      "Space Grotesk", "Noto Sans JP", sans-serif;

  /* Fluid scale */
  --fs-hero:   clamp(3rem, 10vw, 8.5rem);
  --fs-h2:     clamp(1.9rem, 4.6vw, 3.5rem);
  --fs-h3:     clamp(1.15rem, 2.2vw, 1.6rem);
  --fs-lead:   clamp(1rem, 1.4vw, 1.15rem);
  --fs-body:   clamp(.95rem, 1.1vw, 1.02rem);
  --fs-small:  .82rem;
  --fs-en-lbl: clamp(.72rem, 1vw, .82rem);

  /* Layout */
  --pad-x:     clamp(1.25rem, 5vw, 6rem);
  --sec-y:     clamp(4.5rem, 11vw, 9.5rem);
  --maxw:      1280px;
  --radius:    14px;

  /* Motion */
  --ease:      cubic-bezier(.22, .61, .36, 1);
  --ease-out:  cubic-bezier(.16, 1, .3, 1);
}

/* ---------- Base typography ---------- */
html { scroll-behavior: smooth; }
body {
  font-family: var(--f-body);
  font-size: var(--fs-body);
  color: var(--paper);
  background: var(--ink);
  font-feature-settings: "palt";
  letter-spacing: .01em;
  overflow-x: hidden;
}
h1, h2, h3, h4 { font-family: var(--f-display); font-weight: 900; line-height: 1.18; letter-spacing: .01em; }
em { font-style: normal; }

/* ロゴ画像: 黒ロゴを暗背景で白抜き表示するユーティリティ */
.is-invert { filter: invert(1) brightness(1.9); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}