/* =============================================================================
   SELUNEA デザイントークン
   -----------------------------------------------------------------------------
   購入者向けUIの土台となる再利用可能なデザイン変数（色・余白・角丸・影・文字）。
   Apple風の明るく上品なトーン(80%)＋深い月夜の青紫による静かな高級感(20%)。

   【安全設計】
   既存の管理画面（organizer / owner）はダークテーマ（style.css の :root）を
   共有しているため、本デザインシステムは必ず body.page-customer 配下にスコープする。
   これにより管理画面のトークン・レイアウトへ一切影響を与えない。

   全ての値は WCAG AA（白背景上のコントラスト 4.5:1 以上）を満たすことを確認済み。
   ============================================================================= */

body.page-customer {
  /* ---- 背景・面 ---- */
  --color-bg: #f7f8fa;            /* ページ背景（わずかに冷たいオフホワイト） */
  --color-surface: #ffffff;       /* カード・パネルの面 */
  --color-surface-soft: #f1f3f8;  /* 補助パネル（淡い月光を帯びたグレー） */

  /* ---- 文字 ---- */
  --color-text: #17191f;          /* 主要文字（白背景で 17.6:1） */
  --color-text-muted: #5b6472;    /* 補助文字（白背景で 6.0:1） */
  --color-text-faint: #8a92a3;    /* さらに弱い注記（大きめ文字でのみ使用） */

  /* ---- 境界線 ---- */
  --color-border: #e4e7ec;
  --color-border-strong: #d3d8e0;

  /* ---- ブランド（深い月夜の青紫） ---- */
  --color-brand: #4c589c;         /* 主要ブランド（白背景で 6.6:1・白文字で 6.6:1） */
  --color-brand-hover: #3e4a85;   /* ホバー・押下（白文字で 8.3:1） */
  --color-brand-strong: #3c477f;  /* 濃色テキスト用 */
  --color-brand-soft: #eef1fa;    /* 淡い月光（選択状態・柔らかな塗り） */
  --color-brand-contrast: #ffffff;/* ブランド面上の文字 */
  --color-brand-ring: rgba(76, 88, 156, 0.32); /* フォーカスリング */

  /* ---- 状態色（成功・注意・危険）。soft=淡い面 / text=その上の濃い文字 ---- */
  --color-success: #1e874b;
  --color-success-soft: #e7f4ec;
  --color-success-text: #14663a;
  --color-warning: #b8790c;
  --color-warning-soft: #fbf1dd;
  --color-warning-text: #8a5a06;
  --color-danger: #c0392b;
  --color-danger-soft: #fbeae8;
  --color-danger-text: #a02a1e;

  /* ---- 影（やわらかいApple調） ---- */
  --shadow-sm: 0 1px 2px rgba(20, 25, 40, 0.05), 0 1px 3px rgba(20, 25, 40, 0.04);
  --shadow-md: 0 4px 16px rgba(20, 25, 40, 0.06), 0 2px 6px rgba(20, 25, 40, 0.04);
  --shadow-lg: 0 14px 40px rgba(20, 25, 40, 0.10);

  /* ---- 角丸 ---- */
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-pill: 980px;

  /* ---- 共通ヘッダーの高さ（sticky なページ内バーのオフセット基準）---- */
  --header-h: 56px;

  /* ---- 余白（4pxグリッド） ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* ---- タイポグラフィ ---- */
  --font-sans: system-ui, -apple-system, "Segoe UI", "Hiragino Kaku Gothic ProN",
    "Hiragino Sans", "Noto Sans JP", Meiryo, sans-serif;
  --text-xs: 0.8125rem;   /* 13px（下限。これ未満にしない） */
  --text-sm: 0.875rem;    /* 14px */
  --text-base: 1rem;      /* 16px（スマホ本文の基準） */
  --text-lg: 1.125rem;    /* 18px */
  --text-xl: 1.375rem;    /* 22px */
  --text-2xl: 1.75rem;    /* 28px */
  --text-3xl: 2.125rem;   /* 34px */

  /* ---- レイアウト幅 ---- */
  --width-wide: 1120px;   /* トップ・一覧など */
  --width-md: 720px;      /* 詳細・購入フロー */
  --width-narrow: 460px;  /* ログイン・会員登録 */

  /* ---- 操作要素の最小タップ高（アクセシビリティ） ---- */
  --tap-min: 44px;
  --btn-primary-h: 54px;  /* スマホ主要ボタン高 */
}