/* =====================================
   Design Tokens (CSS Custom Properties)
   色・フォント・余白・角丸・シャドウ等の一元管理。
   ここを変更するとサイト全体のデザインを一括変更できる。
===================================== */

:root {
  /* ---- Brand Colors (公式ロゴ準拠) ---- */
  --color-brand-blue: #01008c;      /* ロゴ 日本語部分の青 */
  --color-brand-blue-dark: #010066; /* 青の暗め(hover/UI用) */
  --color-brand-red: #af0011;       /* ロゴ 英字部分の赤 */
  --color-brand-red-dark: #8a000d;  /* 赤の暗め(hover用) */
  --color-black: #111111;

  /* ---- Neutral / Base Colors ---- */
  --color-white: #ffffff;
  --color-ivory: #f7f3ea;
  --color-light-beige: #eee7d9;
  --color-gold: #b89a5d;

  /* ---- Text Colors ---- */
  --color-text: #222222;
  --color-text-muted: #666666;
  --color-text-on-dark: #ffffff;

  /* ---- Semantic ---- */
  --color-border: #e2dccb;
  --color-bg: var(--color-white);
  --color-bg-alt: var(--color-ivory);
  --color-danger: var(--color-brand-red);

  /* ---- Fonts ---- */
  --font-sans: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", system-ui, -apple-system, sans-serif;
  --font-serif: "Noto Serif JP", "Hiragino Mincho ProN", serif;

  /* ---- Layout ---- */
  --container-lg: 1200px;
  --container-md: 960px;
  --container-sm: 680px;
  --header-height: 68px;
  --header-height-mobile: 56px;

  /* ---- Radius ---- */
  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 20px;
  --radius-full: 999px;

  /* ---- Shadow ---- */
  --shadow-sm: 0 2px 8px rgba(17, 17, 17, 0.08);
  --shadow-md: 0 8px 24px rgba(17, 17, 17, 0.12);
  --shadow-lg: 0 16px 40px rgba(17, 17, 17, 0.16);

  /* ---- Spacing scale ---- */
  --space-3xs: 4px;
  --space-2xs: 8px;
  --space-xs: 12px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 40px;
  --space-xl: 64px;
  --space-2xl: 96px;
  --space-3xl: 128px;

  /* ---- Z-index ---- */
  --z-header: 100;
  --z-mobile-cta: 90;
  --z-modal: 200;

  /* ---- Transition ---- */
  --transition-base: 0.25s ease;
}