/* tokens.css — design tokens extracted from tms2-builder.html */

:root {
  --bg-base: #F6F7F4;
  --bg-canvas: #ECEDE8;
  --surface: #FFFFFF;
  --surface-2: #FAFAF8;
  --surface-3: #F2F3EF;
  --border: #E4E5DF;
  --border-strong: #D2D3CC;
  --border-soft: #EDEEE9;

  /* ── Storefront neutral palette ─────────────────────────────────────────────
     Cool slate family, deliberately separate from the builder's warm border /
     text / surface tokens above: builder chrome stays warm, storefront canvas
     stays cool. Single source of truth — page <style> blocks and the per-page
     sr / co / rd / pd / mp / rm aliases all resolve here.
     NOTE: never write an asterisk immediately before a slash in this file; it
     closes the comment early and silently drops the declarations that follow. */

  /* Borders — 3 steps, slate ramp (텍스트·서피스와 같은 계열).
     흰 배경 대비: 1.23 / 1.48 / 2.56 : 1. WCAG 1.4.11 의 3:1 은 미달이므로,
     컨트롤 경계에 엄격 대비가 필요해지면 별도 --t-border-control(≈#7D8FA6, 3.31:1)을 신설한다.
     ※ strong 은 --t-text-3 과 같은 값이지만 역할이 달라 무방. */
  --t-border: #CBD5E1;         /* default: card / input / panel outline */
  --t-border-soft: #E2E8F0;    /* subtle: list rows, accordion items, in-card dividers */
  --t-border-strong: #94A3B8;  /* emphasis: hover / focus states only */

  /* Text — 4 steps, slate ramp. Contrast on --t-surface: 17.9 / 7.6 / 2.6 / 1.5 : 1.
     Steps 1-2 clear AAA; steps 3-4 fall below AA, so they are for meta/labels/
     disabled glyphs only — never body copy. */
  --t-text: #0F172A;           /* headings, emphasised body */
  --t-text-2: #475569;         /* body, secondary description */
  --t-text-3: #94A3B8;         /* labels, meta, placeholder */
  --t-text-4: #CBD5E1;         /* disabled, faint glyphs */

  /* Surfaces — 3 steps. */
  --t-bg: #F8FAFC;             /* page backdrop */
  --t-surface: #FFFFFF;        /* cards, panels, modals */
  --t-surface-2: #F1F5F9;      /* hover rows, quiet emphasis blocks */

  /* Brand — 스토어프론트 전체의 단일 브랜드 루트.
     .ps-* 는 직접, .sr-/.co-/.mp-/.pd-/.rd-* 는 search-results.css 의
     --sr-primary* 별칭을 거쳐 여기로 수렴한다.
     값은 STATE.theme (js/state.js) 기본값과 동일. 빌더 프리뷰와 home.html 은
     render.js 가 #previewContent 에 인라인으로 덮어써 테넌트 값으로 치환하므로,
     여기 값은 그 이전/그 바깥의 기본값이다.
     ※ soft 는 STATE.theme 에 대응 키가 없다 — 테넌트 테마 연결 시 primary 에서
       파생시키거나 theme 에 키를 추가해야 한다. */
  --t-primary: #2563EB;
  --t-primary-strong: #1D4ED8;
  --t-primary-soft: #DBEAFE;
  --t-radius: 6px;

  --text-1: #15181A;
  --text-2: #4D5358;
  --text-3: #828A90;
  --text-4: #B0B6BB;
  --brand: #0E5F4A;
  --brand-bg: #E6F1ED;
  --brand-soft: #D4E8E0;
  --brand-strong: #094A39;
  --status-draft: #B45309;
  --status-draft-bg: #FEF3C7;
  --status-live: #166534;
  --status-live-bg: #DCFCE7;
  --status-info: #1D4ED8;
  --status-info-bg: #DBEAFE;
  --status-error: #B91C1C;
  --status-error-bg: #FEE2E2;
  --route-departure-bg: #04b151;
  --route-departure-border: #049242;
  --route-arrival-bg: #ff4143;
  --route-arrival-border: #bb2f31;
  --route-mid-bg: #fff;
  --route-mid-border: #4A8FE7;
  --route-line-bg: #dce7f5;

  --panel-l: 280px;
  --panel-r: 340px;
  --topbar-h: 112px;     /* tms2-builder 2-row topbar — 각 row 약 56px */
  --shadow-1: 0 1px 2px rgba(20,24,26,.04);
  --shadow-2: 0 4px 12px rgba(20,24,26,.06);
  --shadow-3: 0 12px 32px rgba(20,24,26,.10);
  --font-sans: "Pretendard Variable", Pretendard, -apple-system, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* line-height scale — 역할 기반 4단.
     한글은 받침 때문에 세로 밀도가 높아 라틴 권장(1.5)보다 본문을 한 단 높게 잡는다.
     아이콘·이모지 플래그 등 광학 중앙정렬이 필요한 곳은 토큰 대신 line-height:1 을 그대로 쓴다. */
  --lh-tight: 1.2;      /* 대형 디스플레이 제목 (26px+) */
  --lh-snug: 1.35;      /* 소제목·뱃지·pill·1~2줄 라벨 */
  --lh-normal: 1.5;     /* 기본 UI 텍스트·카드 설명 */
  --lh-relaxed: 1.7;    /* 여러 줄 본문 prose (intro, notice, rich text) */
}

/* 스토어프론트 standalone 페이지 (home / search-results / checkout / route-detail /
   product-detail / profile / reservation-detail / booking-complete).
   빌더 크롬(topbar · 좌우 패널)이 없으므로 layout var 을 0 으로 되돌린다.
   modals.css 의 .ps-modal-backdrop 이 이 값으로 위치를 잡으므로, 빠지면
   모달이 화면 일부만 덮는다. */
body.storefront { --topbar-h: 0px; --panel-l: 0px; --panel-r: 0px; }