/* sjcF0101_tokens.css — step4 v3 디자인 토큰 + Material 3 매핑 */

:root {
  /* === 처음사주 브랜드 팔레트 v3 === */
  /* v3 공식명: 묵색·황등·아이보리·강철색 */
  --color-amber:     #D4A24C;   /* 황등 — 메인 골드 */
  --color-deep-navy: #201A2E;   /* 묵색 — 배경 딥네이비(밤하늘 보라 틴트, 2026-07-30) */
  --color-bg-base:   #F2EDE3;   /* 아이보리 배경 (v3 정정: 구 #F7F3EE) */
  --color-text-ink:  #1A1F2E;   /* 묵색 — 본문 잉크 */
  --color-steel:     #5C6670;   /* 강철색 (v3 정정: 구 #8A8FA0) */
  --color-danger:    #D64B4B;   /* 경고 레드 */
  --color-success:   #3A9E6C;   /* 성공 그린 */
  --color-overlay:   rgba(26,31,46,0.7); /* 블러 오버레이 */
  --color-white:     #FFFFFF;

  /* 헤더 중립 전경 — amber 과다 방지(브랜드 워드마크·주 CTA에만 amber 유지) */
  --color-header-fg:       rgba(242, 237, 227, 0.82); /* 아이보리 베이스 중립 전경 */
  --color-header-fg-hover: rgba(242, 237, 227, 0.12); /* 컨트롤 hover state layer */

  /* === Material 3 토큰 매핑 === */
  --md-sys-color-primary:          var(--color-amber);
  --md-sys-color-on-primary:       var(--color-text-ink);
  --md-sys-color-primary-container: #FFF3D4;
  --md-sys-color-surface:          var(--color-bg-base);
  --md-sys-color-on-surface:       var(--color-text-ink);
  --md-sys-color-surface-variant:  #EDE8E0;
  --md-sys-color-outline:          var(--color-steel);
  --md-sys-color-error:            var(--color-danger);
  --md-sys-color-on-error:         var(--color-white);

  /* === 메인 허브(sjcF0100) 확장 토큰 (디자인지침 MVP §1.3) === */
  --md-sys-color-secondary:        var(--color-deep-navy);  /* 묵색 = 보조 */
  --md-sys-color-on-secondary:     #F2EDE3;
  --md-sys-color-tertiary:         #3B5BA5;                 /* 水남 = 신뢰 악센트(종합·신년) */
  --md-sys-color-on-tertiary:      #FFFFFF;
  --md-sys-color-success:          var(--color-success);    /* #3A9E6C */
  /* 오행 5색 — 축 헤더·장식 전용(CTA 금지) */
  --color-ohaeng-wood:  #3A9E6C;  /* 木 = 관계운 */
  --color-ohaeng-fire:  #D64B4B;  /* 火 = 강조/주의 */
  --color-ohaeng-earth: #D4A24C;  /* 土 = 메인 골드(중앙) */
  --color-ohaeng-metal: #5C6670;  /* 金 = 자기운 */
  --color-ohaeng-water: #3B5BA5;  /* 水 = 종합/신뢰 */

  /* === 타이포그래피 === */
  --font-sans: 'Pretendard', 'Apple SD Gothic Neo', sans-serif;
  --font-serif: '본명조', 'Noto Serif KR', Georgia, serif;

  /* === 스페이싱 === */
  --section-py:   80px;
  --section-py-m: 48px;
  --container-w:  1200px;
  --gutter:       24px;
  --gutter-m:     16px;

  /* === 브레이크포인트 === */
  --bp-mobile: 768px;

  /* === 애니메이션 === */
  --transition-base: 200ms ease;
  --transition-slow: 400ms ease;

  /* === 카드/폼 === */
  --card-radius:  16px;
  --input-radius: 8px;
  --shadow-md:    0 4px 16px rgba(26,31,46,0.12);
  --shadow-lg:    0 8px 32px rgba(26,31,46,0.18);
}