/* 통근 세계일주 디자인 토큰 v0
   출처: 카이로 시험 카드(prototype/intro/img/card.jpg)에서 색을 직접 찍어 뽑았다.
   규칙: 화면 코드에서 색, 글꼴, 반경, 그림자 값을 직접 쓰지 않는다. 여기 있는 이름만 쓴다.
         필요한 값이 없으면 여기에 먼저 추가한다. */
:root{
  /* 금색 (카드 틀) */
  --gold-100:#fbe88c;   /* 틀 밝은 면 */
  --gold-300:#fbc34a;   /* 틀 기본 */
  --gold-500:#df8817;   /* 틀 안쪽 선 */
  --gold-700:#a36518;   /* 칸 테두리, 깊은 그림자 */

  /* 남색 (글자, 띠) */
  --navy-500:#213f71;   /* 상단 라벨, 둘째 줄 알약 */
  --navy-700:#0a2957;   /* 등급 띠, 도시명 */
  --navy-900:#14213d;   /* 본문 글자 */

  /* 크림 (패널, 칩) */
  --cream-50:#fffbe3;   /* 번호 태그, 가장 밝은 면 */
  --cream-100:#ffebc8;  /* 칩 */
  --cream-200:#faecc7;  /* 패널 */
  --cream-400:#dbc89d;  /* 패널 장식, 흐린 선 */

  /* 강조 */
  --stamp-red:#bb161c;  /* 출근 도장 */
  --ink-muted:#636675;  /* 칩 라벨 */
  --white:#fdfdfd;

  /* 화면 바탕 (카드 밖) */
  --bg:#14121c;
  --bg-raised:#201d30;
  --bg-line:#3a3654;
  --on-bg:#f4efe6;
  --on-bg-muted:#a9a3bd;

  /* 뜻으로 부르는 이름 (화면 코드는 가급적 이쪽을 쓴다) */
  --card-frame:linear-gradient(160deg,var(--gold-100) 0%,var(--gold-300) 35%,var(--gold-500) 70%,var(--gold-300) 100%);
  --card-frame-line:var(--gold-500);
  --panel-bg:var(--cream-200);
  --chip-bg:var(--cream-100);
  --chip-line:var(--cream-400);
  --text-strong:var(--navy-700);
  --text:var(--navy-900);
  --text-muted:var(--ink-muted);
  --band-bg:var(--navy-700);
  --band-text:var(--gold-100);
  --pill-bg:var(--navy-500);
  --pill-text:var(--white);

  /* 글꼴. 한글 Jua, 영문 Fredoka (사용자 선택, 2026-11-15). 라이선스 확인 전 */
  --font-ko:"Jua","Apple SD Gothic Neo","Noto Sans KR",system-ui,sans-serif;
  --font-en:"Fredoka","Jua",system-ui,sans-serif;
  --font-ui:system-ui,-apple-system,"Apple SD Gothic Neo","Noto Sans KR",sans-serif;

  /* 반경. 카드 안에서는 카드 너비 기준(cqw)으로 쓴다 */
  --r-card:5cqw;
  --r-scene:3.6cqw;
  --r-chip:2.2cqw;
  --r-pill:999px;

  /* 카드 안 글자 크기 단계 (카드 너비 기준) */
  --fs-city:12.5cqw;
  --fs-value:4.1cqw;
  --fs-body:3.5cqw;
  --fs-quote:3.8cqw;     /* 패널 안 문구 */
  --fs-label:2.9cqw;
  --fs-tiny:2.3cqw;

  /* 카드 안 간격 단계 */
  --sp-1:0.8cqw;
  --sp-2:1.4cqw;
  --sp-3:2.2cqw;
  --sp-4:3.4cqw;

  /* 그림자 */
  --shadow-card:0 10px 40px #0008;
  --shadow-chip:0 0.4cqw 0 var(--cream-400);
  --shadow-text:0 0.5cqw 0 var(--cream-50);

  /* 카드 비율 */
  --card-ratio:2/3;      /* 시험 카드는 3:4였다. 문구를 패널에 넣고 글자를 키우려고 세로로 늘렸다 (사용자, 2026-11-15) */
  --scene-share:62%;    /* 장면 창이 카드 높이에서 차지하는 몫. 장면의 실제 크기는 3:4 시험 카드의 70%와 같다 */
}