/* =========================================================
   BioFlow Lab — Design Tokens
   기존 두 CSS 파일(prototype.css, visual.css)에 흩어져 있던
   색상 / 반경 / 그림자 / 오버레이 값을 실사용 빈도 기준으로 통합.
   이 파일을 index.html에서 prototype.css보다 먼저 로드하세요.
   ========================================================= */

:root {
  /* ---- html 최상위 배경 (V1.4 Premium Biotech skin) ---- */
  --bio-bg-0: #060911;
  --bio-bg-1: #09111b;

  /* ---- 배경 (어두운 순 → 밝은 순) ---- */
  --bio-bg-deepest: #081019;   /* 최상위 배경 */
  --bio-bg-deep: #151b21;      /* 카드/패널 배경 */
  --bio-bg-panel: #263340;     /* 살짝 밝은 패널 */
  --bio-bg-panel-soft: #2d3945;

  /* ---- 유리질(glassmorphism) 배경 ---- */
  --bio-glass: rgba(14, 22, 32, 0.64);
  --bio-glass-strong: rgba(18, 29, 42, 0.76);

  /* ---- 테두리 ---- */
  --bio-border: rgba(255, 255, 255, 0.075);
  --bio-border-soft: rgba(170, 210, 255, 0.12);

  /* ---- 텍스트 ---- */
  --bio-text: #f5f8ff;
  --bio-text-soft: #eaf6ff;
  --bio-text-faint: #f3f6f9;
  --bio-muted: #9aa9bb;
  --bio-muted-strong: #a9b6c3;

  /* ---- 강조 색상 (의미별) ----
     blue    = 기본 인터랙션/정보
     gold    = 추천/주의 (README의 "추천" 버튼 상태와 매핑)
     mint    = 성공/가능
     magenta = 경고/막힘                                        */
  --bio-blue: #a1cfff;
  --bio-blue-soft: #8ed4ff;
  --bio-blue-softer: #88c7ff;
  --bio-blue-pale: #dbeeff;

  --bio-gold: #ffe072;
  --bio-gold-soft: #ffe27a;
  --bio-gold-dim: #e0b84f;

  --bio-mint: #9dffbe;
  --bio-mint-soft: #8ce69d;

  --bio-magenta: #ff99ff;

  /* ---- 화이트 오버레이 스케일 (hover/active/glass 겹침용) ----
     지금 rgba(255,255,255,0.018) / 0.022 / 0.025 / 0.035 등
     미세하게 다른 값이 흩어져 있던 것을 4단계로 통일           */
  --overlay-01: rgba(255, 255, 255, 0.02);   /* 미세한 유리질 결 */
  --overlay-02: rgba(255, 255, 255, 0.05);   /* 은은한 hover */
  --overlay-03: rgba(255, 255, 255, 0.08);   /* 뚜렷한 hover */
  --overlay-04: rgba(255, 255, 255, 0.12);   /* active/selected */

  /* ---- 반경(radius) 스케일 ----
     기존 8/10/12/14/15/16/17/18/19/20/22/26/28px → 5단계로 축소 */
  --radius-sm: 10px;   /* 작은 배지, 인풋 */
  --radius-md: 14px;   /* 기본 버튼, 카드 내부 요소 */
  --radius-lg: 18px;   /* 카드, 패널 */
  --radius-xl: 22px;   /* 큰 카드, 팝업 */
  --radius-pill: 999px; /* 필/토글 버튼 — 이미 27회 일관 사용중, 유지 */

  /* ---- 그림자 ---- */
  --bio-shadow: 0 24px 80px rgba(0, 0, 0, 0.38);
  --hud-shadow-idle: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 12px 40px rgba(0, 0, 0, 0.22);
  --hud-shadow-active: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 0 34px rgba(161, 207, 255, 0.32), 0 12px 40px rgba(0, 0, 0, 0.22);

  /* ---- 반응 버튼 상태 색 (README V1.5.7 "버튼 상태 색상") ----
     지금 각 상태 색이 여러 곳에 개별 hex로 박혀 있을 가능성이 높음.
     여기 한 곳에서만 정의하고 버튼 CSS는 아래 변수만 참조하도록. */
  --state-recommended: var(--bio-gold);
  --state-available: var(--bio-mint);
  --state-condition-missing: var(--bio-blue-softer);
  --state-blocked: var(--bio-magenta);
}

/* =========================================================
   브레이크포인트는 CSS 커스텀 프로퍼티로 media query 조건에
   직접 쓸 수 없습니다 (CSS 명세 제약). 대신 이 값을 "단일 진실
   공급원"으로 문서화하고, 실제 파일에서는 아래 3개 값만 사용:

     - 980px  → 태블릿 이하 (지금 8곳에 중복 선언되어 있던 값)
     - 680px  → 폰
     - 390px  → 작은 폰(iPhone SE 등)

   2단계(미디어쿼리 통합) 작업 때 각 파일에 이 3개 브레이크포인트로
   딱 1개씩만 남기고 나머지는 그 블록 안으로 병합합니다.
   ========================================================= */


/* V1.5.18 map layout lock tokens */
:root {
  --map-zone-height: 62px;
  --map-zone-radius: 19px;
  --map-zone-icon: 34px;
  --map-zone-title-size: 13.8px;
  --map-zone-subtitle-size: 9.8px;
  --map-preview-flow: rgba(161, 207, 255, 0.86);
  --map-preview-flow-soft: rgba(161, 207, 255, 0.14);
}