/* 언제만나 — 디자인 토큰
   이 파일 하나만 링크하면 모든 화면에서 같은 값을 씁니다.
   2026-08-13 — 포인트 색을 파랑에서 세이지 그린으로 교체했습니다.
   화면 파일에는 색값을 직접 쓰지 않으므로, 톤을 바꾸려면 이 파일만 고치면 됩니다. */

:root{
  /* ===== 원자 색 =====
     sage : 브랜드(포인트). 채도를 낮춘 차분한 녹색
     emerald : 성공·완료. 브랜드보다 진하고 선명해 "확정됨"이 구분되게 함 */
  --sage-50:#eef6f1;  --sage-100:#d6e9de; --sage-200:#aed3bf; --sage-300:#7fb99b;
  --sage-400:#559d7c; --sage-500:#2f8360; --sage-600:#246b4e; --sage-700:#1a523c;
  --sage-800:#113828; --sage-900:#081e15;
  --cool-neutral-99:#fafafa; --cool-neutral-98:#f7f7f8; --cool-neutral-96:#f1f1f5;
  --cool-neutral-94:#ebebef; --cool-neutral-90:#dcdce0; --cool-neutral-80:#babcc0;
  --cool-neutral-70:#989a9f; --cool-neutral-60:#76787d; --cool-neutral-50:#5b5d62;
  --cool-neutral-40:#46474c; --cool-neutral-30:#2f3033; --cool-neutral-20:#1f2024;
  --cool-neutral-10:#131418; --cool-neutral-05:#0a0b0e;
  --emerald-50:#e3f5ee; --emerald-500:#0fa06a; --emerald-600:#07785a; --emerald-700:#054f3a;
  --yellow-500:#ffc342; --yellow-600:#f59e0b; --yellow-50:#fff8e6;
  --red-500:#ff4242; --red-600:#e51c1c; --red-50:#ffeded;
  --static-white:#ffffff; --static-black:#000000;
  --alpha-neutral-08:rgba(112,115,124,.08); --alpha-neutral-16:rgba(112,115,124,.16);
  --alpha-neutral-22:rgba(112,115,124,.22);
  --alpha-primary-08:rgba(47,131,96,.08); --alpha-primary-16:rgba(47,131,96,.16);

  /* ===== 배경 · 면 ===== */
  --surface-background:#ffffff;
  --surface-background-alt:var(--cool-neutral-98);
  --surface-elevated:#ffffff;
  --surface-overlay:rgba(0,0,0,.56);
  --surface-inverse:var(--cool-neutral-10);

  /* ===== 글자 ===== */
  --fg-primary:var(--cool-neutral-10);
  --fg-secondary:var(--cool-neutral-40);
  --fg-tertiary:var(--cool-neutral-60);
  --fg-disabled:var(--cool-neutral-80);
  --fg-on-primary:#ffffff;
  --fg-link:var(--sage-600);

  /* ===== 포인트 ===== */
  --brand-primary:var(--sage-500);
  --brand-primary-hover:var(--sage-600);
  --brand-primary-press:var(--sage-700);
  --brand-primary-soft:var(--sage-50);
  /* 연한 브랜드 배경(-soft) 위에 올라가는 글자색 */
  --brand-ink:var(--sage-800);
  /* 어두운 면(토스트 등) 위에 올라가는 브랜드 글자색 */
  --brand-on-dark:var(--sage-200);

  /* ===== 상태 ===== */
  --status-success:var(--emerald-600); --status-success-soft:var(--emerald-50);
  --status-warn:var(--yellow-600);     --status-warn-soft:var(--yellow-50);
  --status-danger:var(--red-500);      --status-danger-soft:var(--red-50);
  --status-info:var(--brand-primary);  --status-info-soft:var(--brand-primary-soft);

  /* 연한 상태 배경(-soft) 위에 올라가는 글자색 — 4.5:1 이상 확보 */
  --status-success-fg:var(--emerald-700);
  --status-warn-fg:#7a4d00;
  --status-danger-fg:var(--red-600);
  --status-info-fg:var(--brand-ink);

  /* ===== 테두리 ===== */
  --border-subtle:var(--cool-neutral-94);
  --border-default:var(--cool-neutral-90);
  --border-strong:var(--cool-neutral-80);
  --border-focus:var(--sage-500);

  /* ===== 인터랙션 ===== */
  --interaction-hover:var(--alpha-neutral-08);
  --interaction-press:var(--alpha-neutral-16);
  --interaction-assistive:var(--alpha-neutral-08);

  /* ===== 히트맵 5단계 =====
     색만으로 구분하지 않도록 화면에서는 항상 숫자를 함께 표시합니다.
     단계 사이 명도 차이를 벌려, 색맹인 분도 진하기 순서를 읽을 수 있게 했습니다. */
  --heat-0-bg:transparent;          --heat-0-fg:var(--fg-disabled);  --heat-0-border:var(--border-default);
  --heat-1-bg:var(--sage-50);       --heat-1-fg:var(--sage-800);     --heat-1-border:var(--sage-100);
  --heat-2-bg:var(--sage-100);      --heat-2-fg:var(--sage-800);     --heat-2-border:var(--sage-200);
  --heat-3-bg:var(--sage-200);      --heat-3-fg:var(--sage-900);     --heat-3-border:var(--sage-300);
  --heat-4-bg:var(--brand-primary); --heat-4-fg:var(--static-white); --heat-4-border:var(--sage-700);

  /* ===== 타이포 ===== */
  --font-sans:"Wanted Sans Variable","Wanted Sans","Pretendard JP","Pretendard",-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --font-mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,monospace;
  --weight-regular:400; --weight-medium:500; --weight-semibold:600; --weight-bold:700;
  --t-title-1-size:28px;   --t-title-1-lh:1.3;
  --t-title-2-size:22px;   --t-title-2-lh:1.3;
  --t-heading-1-size:18px; --t-heading-1-lh:1.4;
  --t-body-1-size:16px;    --t-body-1-lh:1.6;
  --t-body-2-size:15px;    --t-body-2-lh:1.6;
  --t-body-3-size:14px;    --t-body-3-lh:1.6;
  --t-caption-1-size:13px; --t-caption-1-lh:1.5;
  --t-caption-2-size:12px; --t-caption-2-lh:1.5;
  --tracking-tight:-0.012em; --tracking-normal:0; --tracking-loose:0.006em;

  /* ===== 간격 ===== */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px;
  --space-6:24px; --space-8:32px; --space-10:40px;
  --screen-gutter:16px;

  /* ===== 모서리 ===== */
  --radius-md:8px; --radius-lg:12px; --radius-xl:16px; --radius-pill:999px;

  /* ===== 그림자 ===== */
  --shadow-sheet:0 -8px 24px rgba(20,25,30,.08);
  --shadow-bar:0 -1px 0 var(--border-subtle),0 -6px 16px rgba(20,25,30,.05);
  --shadow-toast:0 8px 24px rgba(20,25,30,.16);
  --shadow-scroll-edge:inset -12px 0 12px -12px rgba(20,25,30,.18);

  /* ===== 모션 ===== */
  --motion-fast:150ms cubic-bezier(.2,.8,.2,1);
  --motion-medium:200ms cubic-bezier(.2,.8,.2,1);

  /* ===== 터치 ===== */
  --touch-min:44px;
}