/* =========================================================
   스테이연 공통 디자인 토큰
   홍보 홈페이지 / 손님 페이지 / 관리자 페이지가 모두 공유한다.
   각 페이지 CSS보다 먼저 로드할 것.

   톤: 화이트 · 파스텔 민트 · 햇살 노랑
   - 주색 4개: #A5F1E9, #7FE9DE, #FFF6BF, #FFEBAD
   - 글자색은 가독성을 위해 짙은 중립색을 별도로 둔다.
   ========================================================= */

@font-face {
  font-family: "Pretendard Variable";
  font-weight: 45 920;
  font-style: normal;
  font-display: swap;
  src: url("fonts/PretendardVariable.woff2") format("woff2-variations");
}

@font-face {
  font-family: "SUIT Variable";
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  src: url("fonts/SUIT-Variable.woff2") format("woff2-variations");
}

:root {
  color-scheme: light;

  /* ---- 타이포그래피 ---- */
  --font-display: "SUIT Variable", "Pretendard Variable", system-ui,
    -apple-system, "Apple SD Gothic Neo", sans-serif;
  --font-sans: "Pretendard Variable", system-ui, -apple-system,
    BlinkMacSystemFont, "Apple SD Gothic Neo", "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, "Roboto Mono", monospace;

  /* ---- 배경 / 표면 ---- */
  --bg: #ffffff;
  --bg-sunken: #a5f1e9;
  --surface: #ffffff;
  --surface-soft: #a5f1e9;

  /* ---- 텍스트 ---- */
  --ink: #0c3033;
  --body: #34595a;
  --muted: #668482;
  --faint: #9bb3af;
  --on-dark: #0c3033;

  /* ---- 브랜드 — 파스텔 민트 ---- */
  --green: #7fe9de;
  --green-strong: #246f69;
  --green-soft: #a5f1e9;
  --green-tint: #fff6bf;

  /* ---- 워터 액센트 — 밝은 민트 ---- */
  --water: #a5f1e9;
  --water-soft: #a5f1e9;

  /* ---- 햇살 액센트 ---- */
  --sand: #ffebad;
  --sand-soft: #fff6bf;

  /* ---- 상태색 ---- */
  --amber: #b3742a;
  --amber-soft: #f4e6c8;
  --red: #c0564a;
  --red-soft: #f9e6e2;
  --info: #7fe9de;
  --info-soft: #fff6bf;

  /* ---- 라인 / 구분선 ---- */
  --line: rgba(127, 233, 222, 0.34);
  --line-strong: rgba(127, 233, 222, 0.58);

  /* ---- 그림자 (쿨하고 가볍게) ---- */
  --shadow-sm: 0 2px 10px rgba(127, 233, 222, 0.18);
  --shadow: 0 14px 36px rgba(127, 233, 222, 0.22);
  --shadow-lg: 0 26px 58px rgba(127, 233, 222, 0.28);

  /* ---- 모서리 ---- */
  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  /* ---- 간격 스케일 (4px 기준) ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
  --space-10: 64px;
  --space-11: 80px;
  --space-12: 104px;

  /* ---- 콘텐츠 최대 폭 ---- */
  --content-wide: 1200px;
  --content: 1080px;
  --content-narrow: 760px;

  /* ---- 모션 ---- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --transition: 0.18s var(--ease);
}