/* White — docs/27: 민트 상호작용 · 블루 데이터 · 앰버 주의 · 코랄 경고 */
/* 디자인 토큰 — design_handoff_surflog/README.md "Design Tokens" 표 그대로 */

:root {
  /* 배경 / 표면 */
  --app-bg:            #F4F5F7;
  --selection-fill:    #E0F8F5;
  --surface-header:    #FFFFFF;
  --chrome-bg:         var(--app-bg); /* 상단 헤더·보조 메뉴는 앱 바탕과 같은 회색 */
  --nav-bg:            #00C8B3;   /* v6 White: 애플 민트 */   /* 승인된 청록 하단 메뉴·가운데 Home 원(2026-10-07) */
  --nav-text:          #111316;
  --nav-inactive:      #10544C;   /* 하단 비선택 아이콘·라벨: v6-white 기준 */
  --nav-home:          #111316;   /* 민트 면 위 Home 아이콘은 주요 글자색 */
  --surface-card:      #FFFFFF;
  --surface-sheet:     #FFFFFF;
  --surface-raised:    #F4F5F7;

  /* 텍스트 */
  --text-strong:       #111316;
  --text-mid:          #111316;
  --text-mid-2:        #111316;
  --text-sub:          #5C6068;
  --text-muted:        #5C6068;
  --text-dim:          #8A8E96;
  --text-faint:        #8A8E96;
  --text-quiet:        #111316;
  /* CTA(파란 그라데이션) 버튼 **위**의 보조 글자. 위 회색 토큰들은 어두운 카드
     배경을 전제로 만든 값이라 파란 버튼 위에서는 대비가 무너집니다. */
  --on-cta-sub:        #111316;

  /* 구분선 / 보더 */
  --line-08:           #E6E8EB;
  --line-10:           #E6E8EB;
  --line-12:           #E6E8EB;

  /* 기능별 액센트 */
  /* 2026-10-15 블루 토큰 분리 — 블루는 예보 데이터 전용(--data-forecast). UI(선택·버튼·링크)는 민트, 제목은 중립.
     --accent-forecast는 예전 이름 호환용으로 남기되 값은 UI 민트 글자색. 새 코드는 쓰지 말 것. */
  --data-forecast:        #1F74C4;
  --data-forecast-bg:     #E8F2FC;
  --select-bd:            #9FE3DA;
  --select-fg:            #008574;
  --accent-forecast:      #008574;
  --accent-forecast-lt:   #008574;
  --accent-recent:        #5C6068;
  --accent-recent-bg:     #FFFFFF;
  --accent-recent-bd:     #E6E8EB;
  --accent-pool:          #5C6068;
  --accent-pool-bg:       #FFFFFF;
  --accent-pool-bd:       #E6E8EB;
  --accent-market:        #5C6068;
  --accent-market-bg:     #FFFFFF;
  --accent-market-bd:     #E6E8EB;
  --accent-report:        #008574;
  --accent-report-bg:     #E0F8F5;
  --accent-star:          #F5A524;
  --accent-rating:        #9A5B00;
  /* 히어로 날짜 배지 "Tomorrow" 전용 앰버.
     OKAY 배지(#F5B942)와 같은 노랑 계열로 보이지 않도록 색상을 주황 쪽으로 13° 옮겼습니다
     (OKAY 색상각 40° → 27°). 명도는 비슷하게 둬서 11.5px에서도 또렷하게 읽힙니다 —
     어둡게만 하면(예: --accent-rating) 작은 글씨가 비활성처럼 보입니다. */
  --accent-tomorrow:      #9A5B00;
  --dot-alert:            #F2545B;

  /* 판정 배지 4단계 (docs/01-hero-badge.md 확정색) */
  --tier-best:         #1F74C4;
  --tier-good:         #008574;
  --tier-okay:         #9A5B00;
  --tier-poor:         #D6343C;

  /* 로그 폼 필드별 색 (docs/08-log-tab.md) */
  --log-cool:          #1F74C4;
  --log-move:          #9A5B00;
  --log-habit:         #008574;
  --log-note:          #5C6068;

  /* 히어로 그라디언트 */
  --hero-navy:         #2E4670;
  --hero-grad:         var(--hero-navy);
  --cta-grad:          linear-gradient(135deg, #00C8B3, #00C8B3);
  --link:              #008574;

  /* Radius */
  --r-hero:            22px;
  --r-card:            20px;
  --r-mid:             16px;
  --r-sheet:           20px 20px 0 0;
  --r-pill:            999px;
  --r-inline-badge:    8px;

  /* Spacing */
  --pad-screen:        10px;
  /* 탭 상단 헤더 높이 — 모든 탭이 이 값을 씁니다(Marketplace 기준). */
  --topbar-h:          51px;
  --gap-card:          12px;
  --gap-card-lg:       14px;
  --section-top:       16px;

  /* Layout */
  --app-max-width:     480px;
  /* 아이콘·라벨만의 높이입니다(홈 인디케이터 안전영역 제외) — 실제로 화면에서 차지하는
     전체 두께는 언제나 calc(var(--tabbar-height) + env(safe-area-inset-bottom))로 계산하세요.
     예전엔 70px 고정값에 안전영역을 안 더해서, 노치 기기의 홈 인디케이터(약 34px)를
     하나도 못 피했습니다. */
  --tabbar-height:     68px;   /* 바 자체 높이(2026-10-01 가운데 원형 Home 시안) */
  /* 가운데 원이 바 위로 나온 몫까지 포함한 높이 — 본문 아래 여백·가운데 토스트처럼 원에 가리면 안 되는 것은 이것으로 계산 */
  --tabbar-reach:      80px;

  /* Typography */
  --font-body:         'Pretendard Variable', 'Pretendard', -apple-system, BlinkMacSystemFont,
                       'Segoe UI', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  --font-num:          'Inter', -apple-system, sans-serif;
}