/* =========================================================
   쑥쑥위크 디자인 토큰 v1.0 (2026-10-18)
   문서: docs/디자인시스템.md  ·  원칙: docs/디자인_레퍼런스.md 4.1 (P1~P5)
   규칙: 화면 코드는 semantic 토큰(--color-*, --space-* …)만 쓴다.
        primitive(--green-500 …)는 이 파일 안에서만 참조한다.
   ========================================================= */

:root {
  /* ---------- 1. Primitive palette ---------- */
  /* neutral: 따뜻한 크림~다크브라운 (P1 따뜻한 무채색) */
  --neutral-0:   #FFFFFF;
  --neutral-50:  #FFF9F0;
  --neutral-100: #F1ECE6;
  --neutral-200: #EADFD3;
  --neutral-300: #D9CEC2;
  --neutral-400: #BDB5AE;
  --neutral-500: #9A918A;
  --neutral-600: #6E655E;
  --neutral-700: #5A524C;
  --neutral-800: #47403A;
  --neutral-900: #3A3530;

  /* green: 새싹 초록, 주색 */
  --green-50:  #F2FAF4;
  --green-100: #E3F4E8;
  --green-200: #C4E7CF;
  --green-300: #9DD6AF;
  --green-400: #6BBF8A;
  --green-500: #4CAF7A;
  --green-600: #34825A;
  --green-700: #2F7A50;
  --green-800: #23603E;
  --green-900: #17432B;

  /* peach: 보조, 볼터치, 먹이 카테고리 */
  --peach-50:  #FFF5F1;
  --peach-100: #FFE4DA;
  --peach-200: #FFCDBB;
  --peach-300: #FFB59E;
  --peach-400: #F7967A;
  --peach-500: #E8775A;
  --peach-600: #C95C40;
  --peach-700: #A3472F;
  --peach-800: #7D3624;
  --peach-900: #582619;

  /* butter: 포인트(코인), 반짝이, 재물 */
  --butter-50:  #FFFAE8;
  --butter-100: #FFF2C4;
  --butter-200: #FFE699;
  --butter-300: #FFD86B;
  --butter-400: #F5C443;
  --butter-500: #E0A92A;
  --butter-600: #B8861A;
  --butter-700: #7A5A0E;
  --butter-800: #5C430A;
  --butter-900: #3D2C06;

  /* orange: 지연/이월 3~4주 */
  --orange-50:  #FFF6EB;
  --orange-100: #FDEBD3;
  --orange-200: #FAD5A6;
  --orange-300: #F7BC72;
  --orange-400: #F4A340;
  --orange-500: #E08A22;
  --orange-600: #BF7015;
  --orange-700: #94550A;
  --orange-800: #6E3F07;
  --orange-900: #4A2A05;

  /* red: 경고 전용 (P2) */
  --red-50:  #FDF1F1;
  --red-100: #FBE1E1;
  --red-200: #F6C1C1;
  --red-300: #F09898;
  --red-400: #E86A6A;
  --red-500: #D94F4F;
  --red-600: #C23F3F;
  --red-700: #B33A3A;
  --red-800: #8A2C2C;
  --red-900: #5E1E1E;

  /* blue: 직장, 수(水), 배경 카테고리 */
  --blue-50:  #EEF5FC;
  --blue-100: #DCEBF8;
  --blue-200: #B9D6F1;
  --blue-300: #8FBCE6;
  --blue-400: #64A1D9;
  --blue-500: #4686C4;
  --blue-600: #356CA6;
  --blue-700: #2A5786;
  --blue-800: #204266;
  --blue-900: #152C45;

  /* pink: 연애, 꾸밈 카테고리 */
  --pink-50:  #FFF0F4;
  --pink-100: #FFDDE6;
  --pink-200: #FFBACC;
  --pink-300: #FF93AE;
  --pink-400: #F56E92;
  --pink-500: #E04F78;
  --pink-600: #C23A62;
  --pink-700: #A8325A;
  --pink-800: #78223C;
  --pink-900: #521729;

  /* lavender: 사주 화면 포인트, 장비 카테고리 */
  --lavender-50:  #F5F2FC;
  --lavender-100: #EAE4F8;
  --lavender-200: #D5C9F1;
  --lavender-300: #BBA8E6;
  --lavender-400: #9E85D8;
  --lavender-500: #8367C7;
  --lavender-600: #6A4FAD;
  --lavender-700: #553F8C;
  --lavender-800: #40306A;
  --lavender-900: #2B2047;

  /* slate: 금(金), 고양이 털 */
  --slate-50:  #F3F5F8;
  --slate-100: #E5E9EF;
  --slate-200: #CBD2DD;
  --slate-300: #BFC7D5;
  --slate-400: #8E98AB;
  --slate-500: #6E7990;
  --slate-600: #566076;
  --slate-700: #434B5E;
  --slate-800: #313848;
  --slate-900: #212632;

  /* ---------- 2. Semantic color ---------- */
  --color-bg:            var(--neutral-50);   /* 앱 배경 크림 */
  --color-bg-desktop:    #F3EADF;             /* ≥768px 바깥 배경 */
  --color-surface:       var(--neutral-0);    /* 카드·시트·모달 */
  --color-surface-sunken:var(--neutral-100);  /* 입력 배경·트랙·스켈레톤 */
  --color-border:        var(--neutral-200);
  --color-border-strong: var(--neutral-300);
  --color-border-control:var(--neutral-500);  /* 체크박스·루틴 칸 테두리 (흰 위 3.1:1, WCAG 1.4.11) */
  --color-check:         var(--green-600);    /* 체크된 채움 (흰 위 4.7:1) */
  --color-divider:       var(--neutral-100);
  --color-overlay:       rgba(58, 53, 48, 0.4);

  --color-text:          var(--neutral-900);  /* 11.6:1 on bg */
  --color-text-sub:      var(--neutral-600);  /* 5.4:1 on bg */
  --color-text-disabled: var(--neutral-400);  /* 비활성 전용 (대비 예외) */
  --color-text-inverse:  var(--neutral-0);
  --color-placeholder:   var(--neutral-600);

  --color-primary:        var(--green-400);   /* 막대·선택 채움·아이콘 (텍스트 X) */
  --color-primary-strong: var(--green-600);   /* 버튼 배경 (흰 글자 4.7:1) */
  --color-primary-press:  var(--green-700);   /* 눌림 */
  --color-primary-soft:   var(--green-100);   /* 오늘 그룹·선택 칩 배경 */
  --color-primary-text:   var(--green-700);   /* 흰/크림/soft 위 초록 글자 */
  --color-on-primary:     var(--neutral-0);

  --color-secondary:      var(--peach-300);   /* 볼터치·보조 장식 */
  --color-accent:         var(--butter-300);  /* 별표·반짝이·플로팅 +P 배경 */
  --color-focus:          var(--blue-500);    /* 포커스 링 */

  /* 상태색 (P2: 빨강은 경고에만) */
  --color-done:   var(--green-500);
  --color-late:   var(--orange-400);
  --color-carry:  var(--neutral-500);
  --color-danger: var(--red-400);
  --color-danger-strong: var(--red-600);      /* 위험 버튼 배경 (흰 글자 5.2:1) */
  --color-danger-text:   var(--red-700);
  --color-warn-text:     var(--orange-700);

  /* 배지 bg/fg 쌍 (모두 AA 4.5:1 이상, 문서 표 참고) */
  --badge-done-bg:     var(--green-100);  --badge-done-fg:     var(--green-800);
  --badge-late-bg:     var(--orange-100); --badge-late-fg:     var(--orange-700);
  --badge-carry1-bg:   var(--neutral-100);--badge-carry1-fg:   var(--neutral-600);
  --badge-carry3-bg:   var(--orange-100); --badge-carry3-fg:   var(--orange-700);
  --badge-carry5-bg:   var(--red-100);    --badge-carry5-fg:   var(--red-700);
  --badge-dropped-bg:  var(--neutral-100);--badge-dropped-fg:  var(--neutral-600);
  --badge-info-bg:     var(--blue-100);   --badge-info-fg:     var(--blue-700);
  --badge-point-bg:    var(--butter-100); --badge-point-fg:    var(--butter-700);

  /* 사주 카테고리 (main = 그래픽, bg/fg = 텍스트 쌍) */
  --saju-wealth: var(--butter-400); --saju-wealth-bg: var(--butter-100); --saju-wealth-fg: var(--butter-700);
  --saju-love:   var(--pink-400);   --saju-love-bg:   var(--pink-100);   --saju-love-fg:   var(--pink-700);
  --saju-career: var(--blue-500);   --saju-career-bg: var(--blue-100);   --saju-career-fg: var(--blue-700);
  --saju-health: var(--green-500);  --saju-health-bg: var(--green-100);  --saju-health-fg: var(--green-800);
  --saju-brand:  var(--lavender-500); --saju-brand-bg: var(--lavender-100); --saju-brand-fg: var(--lavender-700);

  /* 상점 카테고리 5개 */
  --shop-food:  var(--peach-400);    --shop-food-bg:  var(--peach-100);    --shop-food-fg:  var(--peach-700);
  --shop-frame: var(--green-400);    --shop-frame-bg: var(--green-100);    --shop-frame-fg: var(--green-800);
  --shop-deco:  var(--pink-400);     --shop-deco-bg:  var(--pink-100);     --shop-deco-fg:  var(--pink-700);
  --shop-bg:    var(--blue-400);     --shop-bg-bg:    var(--blue-100);     --shop-bg-fg:    var(--blue-700);
  --shop-equip: var(--lavender-500); --shop-equip-bg: var(--lavender-100); --shop-equip-fg: var(--lavender-700);

  /* 오행 5개 (그래픽 전용 — 항상 숫자/글자 라벨 병기) */
  --ohaeng-wood:  var(--green-500);
  --ohaeng-fire:  var(--red-400);
  --ohaeng-earth: var(--butter-500);
  --ohaeng-metal: var(--slate-400);
  --ohaeng-water: var(--blue-600);

  /* 캐릭터 공통 (아트 디렉션 7장) */
  --char-outline: var(--neutral-900);
  --char-cheek:   var(--peach-300);

  /* ---------- 3. Typography ---------- */
  --font-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
               "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;
  --font-display: "Jua", "Pretendard Variable", Pretendard, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --font-pixel: "Galmuri11", "Pretendard Variable", monospace;
  --font-pixel-body: "Galmuri14", "Galmuri11", "Pretendard Variable", monospace;

  --font-size-2xs: 0.6875rem; /* 11px 탭 라벨·배지 */
  --font-size-xs:  0.75rem;   /* 12px 캡션 보조 */
  --font-size-sm:  0.8125rem; /* 13px 캡션 */
  --font-size-md:  0.9375rem; /* 15px 본문 */
  --font-size-input: 1rem;    /* 16px 입력 (iOS 확대 방지, M6) */
  --font-size-lg:  1.0625rem; /* 17px 섹션 제목 */
  --font-size-xl:  1.25rem;   /* 20px 화면 제목 */
  --font-size-2xl: 1.5rem;    /* 24px 핵심 숫자 */
  --font-size-3xl: 2rem;      /* 32px 결산·점수 숫자 */

  --font-weight-regular: 400;
  --font-weight-medium:  500;
  --font-weight-semibold:600;
  --font-weight-bold:    700;
  --font-weight-heavy:   800;

  --line-height-tight: 1.25;
  --line-height-snug:  1.4;
  --line-height-body:  1.55;

  --letter-spacing-tight: -0.01em;

  /* ---------- 4. Spacing (4px grid) ---------- */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  --page-x: var(--space-4);       /* 화면 좌우 16px */
  --section-gap: var(--space-6);  /* 섹션 간 24px */
  --stack-gap: var(--space-3);    /* 카드/행 묶음 간 12px */

  /* ---------- 5. Radius ---------- */
  --radius-xs: 6px;     /* 체크박스·트래커 셀 */
  --radius-sm: 8px;     /* 입력 안 작은 요소·썸네일 */
  --radius-md: 12px;    /* 입력·작은 카드·토스트 */
  --radius-lg: 16px;    /* 카드 */
  --radius-xl: 24px;    /* 바텀시트 상단·모달 */
  --radius-pill: 999px; /* 버튼·칩·배지 */

  /* ---------- 6. Shadow (따뜻한 브라운 기반) ---------- */
  --shadow-1: 0 1px 2px rgba(58, 53, 48, 0.06), 0 2px 8px rgba(58, 53, 48, 0.06);  /* 카드 */
  --shadow-2: 0 4px 16px rgba(58, 53, 48, 0.12);                                    /* FAB·토스트·탭바 */
  --shadow-3: 0 -4px 24px rgba(58, 53, 48, 0.14), 0 12px 32px rgba(58, 53, 48, 0.16); /* 시트·모달·데스크톱 프레임 */
  --shadow-focus: 0 0 0 3px rgba(70, 134, 196, 0.45);

  /* ---------- 7. Border ---------- */
  --border-width: 1px;
  --border-width-strong: 2px;
  --border: var(--border-width) solid var(--color-border);

  /* ---------- 8. Z-index ---------- */
  --z-base: 0;
  --z-sticky: 10;
  --z-topbar: 100;
  --z-tabbar: 100;
  --z-fab: 110;
  --z-banner: 120;
  --z-overlay: 200;
  --z-sheet: 210;
  --z-modal: 220;
  --z-toast: 300;

  /* ---------- 9. Motion ---------- */
  --duration-instant: 100ms;  /* 눌림 */
  --duration-fast: 150ms;     /* 색·투명도 */
  --duration-base: 200ms;     /* 체크·칩 */
  --duration-slow: 300ms;     /* 시트·모달 */
  --duration-celebrate: 1500ms; /* 레벨업 */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1); /* 살짝 튀는 overshoot */
  --ease-linear: linear;

  /* ---------- 10. Layout ---------- */
  --app-max-width: 430px;
  --app-min-width: 360px;
  --topbar-h: 56px;
  --tabbar-h: 64px;
  --fab-size: 56px;
  --touch-min: 44px;
  --sheet-max-h: 90dvh;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --stage-h: 300px;        /* S01 캐릭터 무대 (360×480 배경을 slice) */
  --char-size-main: 220px;
  --char-size-card: 72px;
  --char-size-compare: 140px;
}

/* 가로 모드: 무대만 축소 (계약서 10.1) */
@media (orientation: landscape) and (max-height: 500px) {
  :root { --stage-h: 200px; --char-size-main: 150px; }
}

/* 모션 줄이기 (M13) */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-instant: 0ms; --duration-fast: 0ms; --duration-base: 0ms;
    --duration-slow: 0ms; --duration-celebrate: 0ms;
  }
}

/* ---------- 다크 모드 (Could): semantic만 덮어쓴다. 값은 초안 ---------- */
[data-theme="dark"] {
  --color-bg: #1F1C19;
  --color-bg-desktop: #151311;
  --color-surface: #2A2622;
  --color-surface-sunken: #24211D;
  --color-border: #3D3731;
  --color-border-strong: #4D463F;
  --color-divider: #332E29;
  --color-overlay: rgba(0, 0, 0, 0.6);
  --color-text: #F4EEE6;
  --color-text-sub: #BDB5AE;
  --color-placeholder: #9A918A;
  --color-text-disabled: #6E655E;
  --color-primary-strong: var(--green-600);
  --color-primary-soft: #23382B;
  --color-primary-text: var(--green-300);
}