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

:root {
  /* === 처음사주 브랜드 팔레트 v3 === */
  /* v3 공식명: 묵색·황등·아이보리·강철색 */
  --color-amber:     #D4A24C;   /* 황등 — 메인 골드 */
  --color-deep-navy: #1A1F2E;   /* 묵색 — 배경 딥네이비 */
  --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);

  /* === 타이포그래피 === */
  --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);
}