/* ========================================================================
   tokens.css — デザイントークン（色/余白/タイポ/BP/レイヤー 等）
   ===================================================================== */
:root {
  /* ----- カラー ----- */
  --color-bg: #ffffff;
  --color-fg: #111111;
  --color-muted: #666666;
  --color-body: #656464;     /* 本文テキスト用 */

  --color-primary: #203d8a; /* 基調の濃紺 */
  --color-primary-weak: rgba(32,61,138,.08); /* 薄めトーン（ボタンhoverや淡色UI用） */
  --color-secondary: #00a389;
  --color-danger: #d93025;
  --color-warning: #f9ab00;
  --color-success: #188038;
  --color-border: #e5e7eb;
  --color-surface: #f7f7f9;

  /* ----- 余白スケール（8pxベース） ----- */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 40px;
  --space-8: 48px;
  --space-9: 64px;

  /* ----- タイポグラフィ ----- */
  --font-sans: "Noto Sans JP", "Noto Sans", -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, "Hiragino Kaku Gothic ProN",
               "Yu Gothic", "Meiryo", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  --fs-xs: 12px;
  --fs-sm: 14px;
  --fs-md: 16px;
  --fs-lg: 18px;
  --fs-xl: 22px;
  --fs-2xl: 28px;
  --fs-3xl: 36px;

  --lh-tight: 1.25;
  --lh-normal: 1.6;

  /* ----- コンテナ幅・カラム ----- */
  --container-outer: 1330px; /* 大外 */
  --container-inner: 1000px; /* コンテンツ枠 */
  --col-left: 450px;         /* 左カラム固定 */
  --gutter-sp: 16px;         /* SP左右ガター */

  /* ----- 角丸・影 ----- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.06);
  --shadow-md: 0 4px 10px rgba(0,0,0,.08);

  /* ----- ブレークポイント明示 ----- */
  --bp-sp: 767px;            /* SP最大 */
  --bp-pc: 768px;            /* PC最小 */

  /* ----- レイヤー（z-index） ----- */
  --z-header: 100;
  --z-overlay: 1000;
  --z-modal: 1100;

  /* ----- モーション ----- */
  --easing: cubic-bezier(.2,.8,.2,1);
  --dur-fast: 120ms;
  --dur-normal: 200ms;
  --dur-slow: 320ms;
}

/* 低モーション希望時 */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-normal: 0ms;
    --dur-slow: 0ms;
  }
}