/* =============================================================================
   Neo-Retail 디자인 토큰 (기획서 §6.2~§6.4)

   ★ 두 팔레트가 동시에 존재한다. "라이트/다크 모드 전환"이 아니라
     화면 성격에 따라 쓰는 팔레트가 다르다(기획서 §6.2):
       라이트 = 관리자·메뉴·리포트 (ONE과 동일 톤, 기본값)
       다크   = 게임 캔버스·HUD (몰입 구간, .rqw-theme-dark 스코프)

   컴포넌트는 --bg/--fg/--surface 같은 "의미" 토큰만 참조한다.
   .rqw-theme-dark 안에서는 같은 이름이 게임 팔레트 값으로 바뀐다 —
   그래서 컴포넌트 코드를 건드리지 않고 화면 단위로 테마를 바꿀 수 있다.
   ============================================================================= */

:root {
  /* ---- 라이트 팔레트 (기본값) — ONE 규정 §6과 동일 톤, hue만 300 ------------ */
  --bg:         oklch(98%  0.004 260);
  --surface:    oklch(100% 0     0);
  --surface-2:  oklch(96%  0.004 260);
  --fg:         oklch(22%  0.010 260);
  --fg-muted:   oklch(52%  0.010 260);
  --border:     oklch(92%  0.005 260);
  --brand:      oklch(55%  0.14  300);
  --brand-soft: oklch(96%  0.03  300);
  --brand-ink:  oklch(99%  0.005 300);   /* 브랜드 배경 위 텍스트 */
  --danger:     oklch(60%  0.19  25);
  --danger-soft:oklch(96%  0.03  25);

  /* ---- 다크/게임 팔레트 (고정값 — HUD 글래스 효과 등에서 직접 참조) --------- */
  --game-bg-0: oklch(16% 0.02 290);       /* 배경 심연 */
  --game-bg-1: oklch(22% 0.03 290);       /* 패널 */
  --glass:     oklch(30% 0.03 290 / .55); /* 글래스 HUD */
  --neon:      oklch(72% 0.19 300);       /* 액센트/하이라이트 */

  /* ---- 지표 색상 (색만으로 구분하지 않는다 — 아이콘+텍스트 병기 필수) ------ */
  --metric-customer: oklch(65% 0.15 250);  /* 고객 경험 · 블루 */
  --metric-ops:       oklch(68% 0.15 160); /* 매장 운영 · 그린 */
  --metric-profit:    oklch(72% 0.16 60);  /* 수익성 · 앰버 */
  --metric-risk:       oklch(60% 0.19 25); /* 위험/패널티 · 레드 */

  /* ---- 타이포그래피 (기획서 §6.3) — 모바일 기준 스케일 ---------------------- */
  --font-body: 'Noto Sans KR', system-ui, -apple-system, sans-serif;
  --fs-2xs: 11px;
  --fs-xs:  13px;
  --fs-sm:  15px;  /* 본문 */
  --fs-md:  18px;
  --fs-lg:  22px;
  --fs-xl:  28px;
  --fs-2xl: 34px;
  --ls-title: -0.02em;
  --ls-body:  0;

  /* ---- 형태 (기획서 §6.4) --------------------------------------------------- */
  --radius-btn:   12px;
  --radius-card:  16px;
  --radius-sheet: 24px;   /* 상단만 — 컴포넌트에서 top-left/top-right에만 적용 */
  --radius-chip:  999px;

  /* ---- 그림자: 2단계만 ------------------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .06);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, .12);

  /* ---- 글래스 (HUD 등) -------------------------------------------------------- */
  --glass-blur: blur(16px) saturate(140%);
  --glass-border: 1px solid rgba(255, 255, 255, .14);

  /* ---- 모션 ------------------------------------------------------------------- */
  --dur-entry: 220ms;
  --ease-entry: cubic-bezier(.2, .8, .2, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1); /* 오버슈트가 있는 스프링 근사 */

  /* ---- 레이아웃 --------------------------------------------------------------- */
  --appbar-height: 54px;
  --tabbar-height: 58px;
  --touch-min: 44px;
}

/* ---- 다크/게임 스코프: 같은 의미 토큰을 게임 팔레트로 재정의 ------------------- */
.rqw-theme-dark {
  --bg:         var(--game-bg-0);
  --surface:    var(--game-bg-1);
  --surface-2:  oklch(26% 0.03 290);
  --fg:         oklch(96% 0.01 290);
  --fg-muted:   oklch(72% 0.02 290);
  --border:     oklch(40% 0.02 290 / .5);
  --brand:      var(--neon);
  --brand-soft: oklch(32% 0.05 300 / .4);
  --brand-ink:  oklch(12% 0.02 290);
  --danger-soft: oklch(30% 0.08 25 / .35);

  /* 변수만 바꾸면 스코프 자신은 그대로 투명하다 — 실제로 칠해야 한다. */
  background: var(--bg);
  color: var(--fg);
  min-height: 100%;
  display: block;
}

/* prefers-color-scheme은 쓰지 않는다 — 이 시스템의 라이트/다크는 OS 설정이 아니라
   "메뉴 화면 vs 게임 화면"이라는 화면 성격 구분이기 때문이다(기획서 §6.2). */