/* デザインの値（色・文字・余白・動き）。今の v2 の base.css の :root から移した（plans/cloudflare-static-site.md の工程3）。
   部品の CSS は、ここの変数だけを使い、値を直書きしない。 */

@property --h-dx { syntax: "<percentage>"; inherits: false; initial-value: 0%; }
@property --h-dy { syntax: "<percentage>"; inherits: false; initial-value: 0%; }
@property --h-dz { syntax: "<percentage>"; inherits: false; initial-value: 0%; }

:root {
  /* 色（#f4f4f4 の地で: 本文 #1d1c1c は約15.6:1、補助 #4a4a4a は約8.0:1） */
  --h-bg: #f4f4f4;
  --h-bg-2: #eaeaea;
  --h-ink: #1d1c1c;
  --h-muted: #4a4a4a;
  --h-line: #c8c8c8;
  --h-line-strong: #1d1c1c;
  --h-night: #121212;
  --h-night-ink: #f4f4f4;       /* #121212 の地で約17:1 */
  --h-night-muted: #bdbdbd;     /* #121212 の地で約10:1 */
  --h-accent: #fc4d68;          /* 文字には使わない。点などの装飾だけ */
  --h-focus: #1d1c1c;
  /* ヘッダーの CTA: 映像のスポットライトの色（女性側のピンク、男性側のブルー）から。文字との差は AAA（7:1）以上 */
  --h-cta-pink: #fc4d68;        /* 公開中のサイトのピンク（ゆんの指示で、文字は白。白との差は約3.28:1。見やすさの基準はゆんの判断で例外、2026-09-25） */
  --h-cta-pink-hover: #e63e59;
  --h-cta-blue: #1f5a8f;        /* 白い文字と約7.2:1 */
  --h-cta-blue-hover: #174670;
  --h-focus-halo: #ffffff;

  --h-font-display: "Archivo", "Noto Sans JP", sans-serif;
  --h-font-ja: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", sans-serif;
  --h-font-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --h-header-h: 68px;           /* stage.js が実測値で上書きする */
  --h-gutter: clamp(16px, 1.2rem + 1vw, 40px);
  --h-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --h-ease-io: cubic-bezier(0.83, 0, 0.17, 1);

  color-scheme: light;
}