/* ============================================================
   마이테이블 · Design Tokens
   8종 layout 모두 이 토큰을 공유. layout마다 다른 건 구조뿐.
   ============================================================ */

:root {
  /* ---- Color ---- */
  --bg-0: #0E0E0E;
  --bg-1: #181818;
  --bg-2: #242424;
  --text-0: #F2F2F0;
  --text-1: #B0B0AE;
  --text-2: #6E6E6C;
  --accent: #C8A86B;
  --accent-dim: rgba(200, 168, 107, 0.15);
  --border: rgba(255, 255, 255, 0.06);

  /* ---- Typography ---- */
  --font-serif: 'Noto Serif KR', 'Cormorant Garamond', 'Apple SD Gothic Neo', 'Times New Roman', serif;
  --font-sans: 'Pretendard', 'Inter', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', 'Noto Sans KR', sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', 'Consolas', monospace;

  /* type scale */
  --t-xs: 11px;
  --t-sm: 13px;
  --t-base: 15px;
  --t-md: 17px;
  --t-lg: 20px;
  --t-xl: 26px;
  --t-2xl: 34px;
  --t-3xl: 48px;

  /* ---- Spacing · 8px grid ---- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;

  /* ---- Radius ---- */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 16px;
  --r-full: 9999px;

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 0.15s;
  --dur-base: 0.25s;
  --dur-slow: 0.4s;

  /* ---- Shadow ---- */
  --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 12px 48px rgba(0, 0, 0, 0.6);

  /* ---- Z ---- (낮은 → 높은) */
  --z-base: 0;
  --z-card-hover: 5;
  --z-caption: 10;
  --z-sticky: 20;
  --z-layout-nav: 50;
  --z-nav: 100;
  --z-cart: 200;
  --z-modal: 300;
  --z-toast: 400;
  --z-banner: 500;
}

/* ---- Light theme baseline (data-theme="light") ----
   사장 admin "디자인 → 모드"에서 라이트 선택 시 적용.
   preset의 --bg-0..2 / --text-0..2가 명시 지정되면 그 값 우선 (cascade).
   --accent / --border / --shadow-* 는 라이트에 맞게 재정의. */
[data-theme="light"] {
  --bg-0: #FAFAF7;
  --bg-1: #F1F0EC;
  --bg-2: #E5E4DF;
  --text-0: #1A1A1A;
  --text-1: #5A5A57;
  --text-2: #9A9A95;
  --border: rgba(0, 0, 0, 0.08);
  --accent-dim: rgba(200, 168, 107, 0.18);

  --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 12px 48px rgba(0, 0, 0, 0.12);
}

/* ---- Reset ---- */
* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }
body {
  font-family: var(--font-sans);
  font-size: var(--t-base);
  color: var(--text-0);
  background: var(--bg-0);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; padding: 0; }
a { color: inherit; text-decoration: none; }