/* 디자인 토큰 — design_handoff_surflog/README.md "Design Tokens" 표 그대로 */

:root {
  /* 배경 / 표면 */
  --app-bg:            #1c1c1e;
  --surface-header:    #0a0a0b;
  --surface-card:      #141416;
  --surface-sheet:     #141416;
  --surface-raised:    #17181a;

  /* 텍스트 */
  --text-strong:       #f2f2f3;
  --text-mid:          #e8e8ea;
  --text-mid-2:        #DFDFDF;
  --text-sub:          #86868a;
  --text-muted:        #9a9a9e;
  --text-dim:          #6a6a6e;
  --text-faint:        #5a5a5e;
  --text-quiet:        #c7c7ca;
  /* CTA(파란 그라데이션) 버튼 **위**의 보조 글자. 위 회색 토큰들은 어두운 카드
     배경을 전제로 만든 값이라 파란 버튼 위에서는 대비가 무너집니다. */
  --on-cta-sub:        rgba(255, 255, 255, .72);

  /* 구분선 / 보더 */
  --line-08:           rgba(255, 255, 255, .08);
  --line-10:           rgba(255, 255, 255, .10);
  --line-12:           rgba(255, 255, 255, .12);

  /* 기능별 액센트 */
  --accent-forecast:      #5ec6f0;
  --accent-forecast-lt:   #7cd4f7;
  --accent-recent:        #14b8a6;
  --accent-recent-bg:     rgba(45, 212, 191, .07);
  --accent-recent-bd:     rgba(45, 212, 191, .16);
  --accent-pool:          #ff5a45;
  --accent-pool-bg:       rgba(255, 111, 97, .08);
  --accent-pool-bd:       rgba(255, 111, 97, .18);
  --accent-market:        #f0b400;
  --accent-market-bg:     rgba(255, 214, 10, .08);
  --accent-market-bd:     rgba(255, 214, 10, .18);
  --accent-report:        #A5FF00;
  --accent-report-bg:     rgba(165, 255, 0, .12);
  --accent-star:          #b89bdb;
  --accent-rating:        #c08a2e;
  /* 히어로 날짜 배지 "Tomorrow" 전용 앰버.
     OKAY 배지(#F5B942)와 같은 노랑 계열로 보이지 않도록 색상을 주황 쪽으로 13° 옮겼습니다
     (OKAY 색상각 40° → 27°). 명도는 비슷하게 둬서 11.5px에서도 또렷하게 읽힙니다 —
     어둡게만 하면(예: --accent-rating) 작은 글씨가 비활성처럼 보입니다. */
  --accent-tomorrow:      #f0913a;
  --dot-alert:            #e2685a;

  /* 판정 배지 4단계 (docs/01-hero-badge.md 확정색) */
  --tier-best:         #38BDF8;
  --tier-good:         #3fce7f;
  --tier-okay:         #F5B942;
  --tier-poor:         #e2685a;

  /* 로그 폼 필드별 색 (docs/08-log-tab.md) */
  --log-cool:          #5ec6f0;
  --log-move:          #F5B942;
  --log-habit:         #3FCE7F;
  --log-note:          #B394F0;

  /* 히어로 그라디언트 */
  --hero-grad:         linear-gradient(160deg, #0A4F6E, #062B3E);
  --cta-grad:          linear-gradient(135deg, #1A8AAF, #0A4F6E);
  --link:              #1A8AAF;

  /* 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:     53px;

  /* 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;
}