/* =============================================
 * tokens.css
 * ============================================= */
/*
 * tokens.css
 * Design Tokens — CSS Custom Properties
 * 全値は tokens.json から完全転写（独自値の追加禁止）
 * -----------------------------------------------
 */

:root {
  /* =============================================
   * Colors
   * ============================================= */
  --color-primary:          #342F6E;
  --color-primary-dark:     #1F1B4A;
  --color-primary-light:    #4D4791;

  --color-accent-orange:       #F7701A;
  --color-accent-orange-hover: #D95C0A;
  --color-accent-green:        #2C5530;
  --color-accent-green-light:  #3F7A45;
  --color-accent-gold:         #B89968;
  --color-accent-yellow:       #E5D478;

  --color-bg:              #FFFFFF;
  --color-bg-alt:          #F5F5F3;
  --color-bg-cream:        #FFF8E5;
  --color-bg-cream-soft:   #FAF6E8;
  --color-bg-brown:        #6E5840;

  --color-text:            #342F6E;
  --color-text-base:       #333333;
  --color-text-secondary:  #666666;
  --color-text-muted:      #999999;
  --color-text-on-dark:    #FFFFFF;
  --color-text-error:      #C7372F;

  --color-border:          #E0E0E0;
  --color-border-soft:     #EAEAEA;
  --color-divider:         #D8D8D8;

  /* =============================================
   * Typography — Font Families
   * ============================================= */
  --font-base:     'Noto Sans JP', 'Hiragino Sans', 'Yu Gothic', sans-serif;
  --font-heading:  'Shippori Mincho B1', 'Hiragino Mincho ProN', 'Yu Mincho', serif;
  --font-en-serif: 'Cormorant Garamond', 'Times New Roman', serif;

  /* =============================================
   * Typography — Scale
   * 標準: PC 16px / SP 14px、注釈・最小: PC 14px / SP 12px
   * ============================================= */
  --fs-xs:   14px; /* 注釈・最小 */
  --fs-sm:   14px; /* 補足（PC最小14px） */
  --fs-base: 16px; /* 標準本文 */
  --fs-md:   16px;
  --fs-lg:   18px;
  --fs-xl:   20px;
  --fs-2xl:  24px;
  --fs-3xl:  28px;
  --fs-4xl:  32px;
  --fs-5xl:  40px;
  --fs-6xl:  48px;
  --fs-hero: 80px;

  /* =============================================
   * Typography — Weight
   * ============================================= */
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-bold:    700;
  --fw-black:   900;

  /* =============================================
   * Typography — Line Height
   * ============================================= */
  --lh-tight:   1.3;
  --lh-snug:    1.5;
  --lh-base:    1.8;
  --lh-relaxed: 2.0;

  /* =============================================
   * Typography — Letter Spacing
   * ============================================= */
  --ls-tight:   0;
  --ls-base:    0.04em;
  --ls-wide:    0.08em;
  --ls-widest:  0.16em;

  /* =============================================
   * Spacing
   * ============================================= */
  --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;
  --space-10: 80px;
  --space-11: 96px;
  --space-12: 120px;
  --space-13: 160px;

  /* =============================================
   * Container
   * ============================================= */
  --container-default:    1200px;
  --container-narrow:     960px;
  --container-wide:       1440px;
  --container-padding-x-pc: 40px;
  --container-padding-x-sp: 20px;

  /* =============================================
   * Border Radius
   * ============================================= */
  --radius-none:   0;
  --radius-sm:     4px;
  --radius-md:     8px;
  --radius-lg:     16px;
  --radius-xl:     24px;
  --radius-pill:   9999px;
  --radius-circle: 50%;

  /* =============================================
   * Shadow
   * ============================================= */
  --shadow-sm:   0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-md:   0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg:   0 8px 24px rgba(0, 0, 0, 0.12);
  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.06);

  /* =============================================
   * Breakpoints
   * （CSS メディアクエリ内では使用不可。JS連携用）
   * ============================================= */
  --bp-sm: 375px;
  --bp-md: 768px;
  --bp-lg: 1280px;
  --bp-xl: 1920px;

  /* =============================================
   * Transition
   * ============================================= */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;

  /* =============================================
   * Header
   * ============================================= */
  --header-height-pc: 84px;
  --header-height-sp: 60px;

  /* =============================================
   * Z-Index
   * ============================================= */
  --z-base:    1;
  --z-card:    10;
  --z-fixed:   100;
  --z-header:  1000;
  --z-modal:   9000;
  --z-tooltip: 9999;
}

/* =============================================
 * SP（〜768px）— Typography Scale 上書き
 * 標準 14px / 注釈・最小 12px
 * ============================================= */
@media (max-width: 768px) {
  :root {
    --fs-xs:   12px; /* 注釈・最小（SP） */
    --fs-sm:   12px; /* 補足（SP最小12px） */
    --fs-base: 14px; /* 標準本文（SP） */
    --fs-md:   14px;
  }
}