/* Hallmark · genre: editorial · macrostructure: Split Studio
 * theme: studied-DNA (source: https://noog.jp/pages/lp)
 * ─ 取れたDNA: フルブリード写真ヒーロー / 交互ハーフスプリット×3 / 工程写真グリッド /
 *              価格は価値を出し切った後に素の数字ひとつ / CTAはカートでなくLINE
 * ─ 取れなかった: 正確なフォント名・色値・余白（Shopifyで外部CSS化）→ dress はこちらで決定
 * ─ rhythm: unknown (URL mode)
 * enrichment: 写真スロット（撮影待ち・実写のみ／生成画像もストックも入れない）
 * nav: N12 banner+retract · footer: Ft6 letter close
 * tone: utilitarian · anchor hue: 75 (warm oat) · accent: 朱 hue 38
 * pre-emit critique: P5 H5 E4 S5 R4 V4
 */

:root {
  /* ── paper & ink ─────────────────────────────── */
  --color-paper:        oklch(97%  0.010 75);
  --color-paper-2:      oklch(94%  0.013 75);
  --color-paper-3:      oklch(90%  0.016 72);
  --color-rule:         oklch(84%  0.012 72);
  --color-rule-strong:  oklch(70%  0.014 68);
  --color-muted:        oklch(44%  0.010 62);
  --color-ink:          oklch(22%  0.014 55);
  --color-ink-inv:      oklch(97%  0.008 75);

  /* ── dark band（ヒーロー／工程／締め。LPのコントラストを作る） ── */
  --color-band:         oklch(21%  0.016 55);
  --color-band-2:       oklch(27%  0.016 55);
  --color-band-rule:    oklch(38%  0.014 55);
  --color-band-muted:   oklch(74%  0.010 70);

  /* ── accent (朱) — 3%未満で使う ──────────────── */
  --color-accent:       oklch(52%  0.155 38);
  --color-accent-on-band: oklch(68% 0.150 40);
  --color-accent-soft:  oklch(92%  0.038 40);
  --color-focus:        oklch(52%  0.160 38);
  --color-scrim:        oklch(21%  0.016 55 / 0.72);

  /* ── type（男性狙い・現場寄りへ。明朝→太ゴシック） ── */
  --font-display: "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic", sans-serif;
  --font-body:    "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;

  --text-xs:      0.75rem;
  --text-sm:      0.8125rem;
  --text-base:    1rem;
  --text-md:      1.1875rem;
  --text-lg:      1.4375rem;
  --text-xl:      1.75rem;
  --text-2xl:     2.125rem;
  --text-3xl:     2.625rem;
  --text-display-s: clamp(1.75rem, 4vw + 0.5rem, 2.625rem);
  --text-display:   clamp(2.125rem, 6vw + 0.25rem, 3.75rem);

  /* ── space (4pt scale) ───────────────────────── */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2rem;
  --space-xl:  3rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --page-gutter: clamp(1.25rem, 5vw, 4rem);

  /* ── rules & radius ──────────────────────────── */
  --rule-hair:   1px;
  --rule-thick:  3px;
  --radius-sm:   2px;
  --radius-md:   4px;

  /* ── motion ──────────────────────────────────── */
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:      cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
  --dur-short:    140ms;
  --dur-mid:      260ms;

  /* ── z scale ─────────────────────────────────── */
  --z-base:       0;
  --z-raised:     10;
  --z-sticky:     200;
  --z-sticky-nav: 300;
  --z-overlay:    1000;

  --banner-height: 44px;
}