/* ==========================================================================
   tokens.css — デザイントークン（唯一の色・寸法の定義元）
   ダークモード固定。テーマ切替の仕組みは持たない。
   色は必ずここで定義し、他CSSからは var() 経由でのみ参照する。
   ========================================================================== */

:root {
  /* --- Base surfaces (dark fixed) ------------------------------------- */
  --color-bg: oklch(0.17 0.006 260); /* 主背景・炭色 */
  --color-bg-deep: oklch(0.11 0.005 260); /* 最暗部・フッター/ヒーロー */
  --color-bg-raise: oklch(0.22 0.007 260); /* カード面 */
  --color-bg-hover: oklch(0.27 0.008 260); /* 暗面カードのホバー（枠線の代わり） */
  --color-panel-light: oklch(0.93 0.008 90); /* 明色パネル・和紙 */
  --color-panel-light-2: oklch(0.87 0.010 90); /* 明色パネルの陰 */
  --color-panel-light-hover: oklch(0.91 0.010 90); /* 明面カードのホバー（枠線の代わり） */

  /* --- Text ------------------------------------------------------------ */
  --color-text: oklch(0.96 0.004 90); /* 暗面の本文 */
  --color-text-muted: oklch(0.74 0.008 90); /* 暗面の補助文 */
  --color-text-faint: oklch(0.56 0.008 90); /* 暗面のキャプション */
  --color-text-on-light: oklch(0.24 0.010 260); /* 明面の本文 */
  --color-text-on-light-muted: oklch(0.44 0.012 260); /* 明面の補助文 */

  /* --- Accent (Iron Man パレット) --------------------------------------- */
  --color-accent: oklch(0.58 0.198 25); /* Red   #E63946 相当 */
  --color-accent-strong: oklch(0.50 0.190 25); /* Red の押し込み */
  --color-accent-2: oklch(0.82 0.150 88); /* Gold  #F4C430 相当 */
  --color-accent-3: oklch(0.80 0.100 205); /* Cyan  #4DD0E1 相当 */

  /* --- Lines & overlays ------------------------------------------------ */
  --color-line: oklch(0.34 0.008 260);
  --color-line-light: oklch(0.78 0.010 90);
  --color-overlay: oklch(0.08 0.004 260 / 0.72);
  --color-scrim: oklch(0.11 0.005 260 / 0.55);

  /* --- Typography ------------------------------------------------------ */
  --font-display: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN",
    "Yu Gothic", "Meiryo", sans-serif;
  --font-body: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN",
    "Yu Gothic", "Meiryo", sans-serif;
  --font-en: "Archivo Black", "Impact", "Haettenschweiler",
    "Arial Narrow Bold", sans-serif;
  --font-mono: "SFMono-Regular", "Menlo", "Consolas", monospace;

  --weight-normal: 400;
  --weight-bold: 700;
  --weight-black: 900;

  /* 見出しスケール（clamp でビューポート追従） */
  --fs-hero: clamp(2.75rem, 11vw, 7.5rem);
  --fs-h1: clamp(2rem, 6vw, 3.75rem);
  --fs-h2: clamp(1.6rem, 4.4vw, 2.75rem);
  --fs-h3: clamp(1.15rem, 2.4vw, 1.5rem);
  --fs-body: clamp(0.9375rem, 1.1vw, 1rem);
  --fs-small: 0.8125rem;
  --fs-label: 0.6875rem;
  --fs-bg-title: clamp(3.5rem, 14vw, 11rem); /* 背面アウトライン英字 */

  --lh-tight: 1.15;
  --lh-heading: 1.35;
  --lh-body: 1.95;
  --ls-wide: 0.18em;
  --ls-label: 0.32em;

  /* --- Spacing --------------------------------------------------------- */
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1.25rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4rem;
  /* 参考サイトは要素が詰まっている。間延びを避けるため控えめに取る。 */
  --space-section: clamp(3.25rem, 6.5vw, 6rem);

  /* --- Layout ---------------------------------------------------------- */
  /* 参考サイトはコンテンツが画面幅の約96%を占め、カードが画面端まで流れる。
     中央寄せの固定幅を使わず、ガターだけで内側を確保する。 */
  --content-max: none;
  --content-narrow: 780px;
  --gutter: clamp(1.25rem, 3.3vw, 3rem);
  --header-height: 64px;
  --tear-height: clamp(36px, 5vw, 68px); /* 破れ紙エッジの高さ */
  --radius-sm: 2px;
  --radius-md: 4px;

  /* --- Motion ---------------------------------------------------------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 180ms;
  --dur-mid: 340ms;
  --dur-slow: 720ms;

  /* --- Elevation ------------------------------------------------------- */
  --z-base: 0;
  --z-tear: 5;
  --z-sticky: 50;
  --z-nav: 80;
  --z-overlay: 90;
}