/**
 * SOYOUNGFLOW design tokens (draft)
 *
 * 사용: 각 HTML의 <head>에서 페이지 전용 <style>보다 먼저 연결
 *   <link rel="stylesheet" href="css/tokens.css">
 *
 * 기존 페이지의 :root 변수명(--cream, --ink 등)을 그대로 두어
 * 점진적으로 링크만 바꿔도 동작하도록 맞춤.
 */

:root {
  /* —— Palette (surface) —— */
  --cream: #f2ede5;
  --cream-dark: #eae3d8;
  --parchment: #ede6d9;

  /* —— Palette (accent / sky) —— */
  --sky: #7baac4;
  --sky-light: #b2cedf;
  --sky-deep: #4a7a9b;

  /* —— Palette (text) —— */
  --ink: #2b2420;
  --ink-soft: #4a3f38;
  --ink-muted: #7a6f68;

  /* —— Palette (accent / warm) —— */
  --rust: #8b4e3c;
  --gold: #b8946a;

  /* —— Semantic aliases (선택) —— */
  --color-bg-page: var(--cream);
  --color-text: var(--ink);
  --color-text-muted: var(--ink-muted);
  --color-accent: var(--rust);
  --color-interactive: var(--sky-deep);

  /* newsletter-admin.html 호환용 */
  --bg: var(--cream);
  --muted: var(--ink-muted);

  /* —— Typography —— */
  --font-sans: "Noto Sans KR", system-ui, sans-serif;
  --font-serif-kr: "Noto Serif KR", "Noto Sans KR", serif;
  --font-display: "Cormorant Garamond", "Noto Serif KR", serif;
  --font-script: "Pinyon Script", cursive;

  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;

  --line-height-body: 1.75;
  --line-height-tight: 1.3;

  /* —— Spacing (8px 기준 스케일) —— */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 80px;
  --space-10: 96px;

  /* —— Layout —— */
  --content-max-width: 720px;
  --content-max-width-wide: 820px;
  --col: 72px;

  --page-padding-x: 56px;
  --page-padding-x-tight: 24px;
  --page-padding-x-mobile: 20px;
  --page-padding-x-mobile-sm: 16px;

  /* —— Breakpoints (미디어쿼리용 참고값, px 그대로 사용) —— */
  /* sm 480 | md 768 | lg 960 | xl 1024 */

  /* —— Touch / a11y —— */
  --touch-target-min: 44px;
  --font-size-body: 16px;

  /* —— Radius —— */
  --radius-sm: 6px;
  --radius-md: 8px;

  /* —— Shadow —— */
  --shadow-card: 0 1px 8px rgba(0, 0, 0, 0.06);
  --shadow-soft: 0 4px 24px rgba(43, 36, 32, 0.06);

  /* —— Nav / chrome —— */
  --nav-padding-y: 22px;
  --nav-padding-x: 56px;
  --nav-bg: rgba(242, 237, 229, 0.85);
  --nav-border: rgba(43, 36, 32, 0.07);

  /* —— Z-index —— */
  --z-nav: 200;
  --z-overlay: 500;
  --z-noise: 999;

  /* —— Motion —— */
  --ease-default: ease;
  --duration-fast: 0.2s;
  --duration-normal: 0.3s;

}
