/* 디자인 토큰 (설계서 7장). 색·글자·간격·모서리·그림자는 여기서만 정의한다
   밝은 화면이 기본. 다크 모드는 자동 적용하지 않고 <html data-theme="dark"> 일 때만 (MY > 설정) */
@font-face {
  font-family: "Pretendard";
  src: url("../../vendor/pretendard/PretendardVariable.woff2") format("woff2-variations");
  font-weight: 45 920;
  font-style: normal;
  font-display: swap;
}

/* 요리공책 손글씨 (나눔펜, OFL): 한글이 작게 그려지는 글꼴이라 170% 로 키워 본문 글자 높이에 맞춘다. 자주 쓰는 한글 2350자 + 영문 */
@font-face {
  font-family: "YoriHand";
  src: url("../../vendor/nanumpen/NanumPenScript-sub.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  size-adjust: 170%;
}

:root {
  /* 색: 할머니 요리공책 — 바랜 종이 · 잉크 갈색 · 토마토 · 허브 · 나무 숟가락 (아이콘에서) */
  --brand: #E59866;          /* 버튼·선택 탭·별점 (구운 살구) */
  --brand-strong: #D3804E;   /* 눌림·강조 */
  --on-brand: #3B2E24;       /* 살구 위 글씨 5:1 이상 (흰색 금지) */
  --brand-text: #9A4521;     /* 링크·강조 글씨 (적갈색 잉크) */
  --brand-soft: #F7DFC6;     /* 배지·선택 배경 */
  --bake: #E3B36E;
  --tomato: #C4553B;         /* 공책 여백선·포인트 */
  --herb: #6B8A4B;           /* 허브 초록 포인트 */
  --bg: #F3EAD6;             /* 페이지 배경 (바랜 종이) */
  --surface: #FCF7EC;        /* 카드 (공책 낱장) */
  --surface-2: #F0E5CF;      /* 카드 안 입력칸·구역 */
  --line: #E4D6BA;
  --line-strong: #D5C3A2;
  --rule: rgb(120 150 190 / 18%);   /* 공책 줄 (옅은 파랑) */
  --text: #3B2E24;           /* 본문 (잉크 갈색) */
  --text-sub: #6E5D4C;       /* 보조 */
  --ok: #5C7A40;
  --danger: #AE4A32;

  /* 글자: 본문·내용 제목 Pretendard · 로고·화면 제목·하단 메뉴만 나눔펜 손글씨 */
  --font: "Pretendard", system-ui, -apple-system, "Segoe UI", "Noto Sans", sans-serif;
  --font-title: var(--font);   /* 내용 제목은 본문 글꼴로 깔끔하게 */
  --font-hand: "YoriHand", var(--font);
  --fs-title: 1.375rem;      /* 22 */
  --fs-h2: 1.125rem;         /* 18 */
  --fs-body: 0.9375rem;      /* 15 */
  --fs-sm: 0.8125rem;        /* 13 */
  --fs-xs: 0.6875rem;        /* 11 */

  /* 간격 (4px 단위) */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px;
  --space: 16px;             /* 화면 좌우 여백 */

  /* 모서리 · 그림자 */
  --radius-sm: 10px;
  --radius: 12px;            /* 버튼·입력칸 */
  --radius-card: 16px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgb(80 60 40 / 8%);
  --shadow: 0 1px 2px rgb(80 60 40 / 7%), 0 4px 14px rgb(80 60 40 / 8%);
  --shadow-lg: 0 8px 28px rgb(80 60 40 / 16%);

  --topbar-h: 56px;
  --tabbar-h: 64px;
  color-scheme: light;
}

:root[data-theme="dark"] {
  --brand: #EBA77A;
  --brand-strong: #F0B88F;
  --on-brand: #1F1913;
  --brand-text: #EBA77A;
  --brand-soft: #3B2C20;
  --bake: #EDBE7E;
  --tomato: #E07A60;
  --herb: #9DBB7C;
  --bg: #1E1914;
  --surface: #29221B;
  --surface-2: #322920;
  --line: #3B3128;
  --line-strong: #4B3F33;
  --rule: rgb(140 170 210 / 12%);
  --text: #F1E6D4;
  --text-sub: #BCAA93;
  --ok: #9DBB7C;
  --danger: #E08A72;
  --shadow-sm: none;
  --shadow: none;
  --shadow-lg: 0 8px 28px rgb(0 0 0 / 40%);
  color-scheme: dark;
}

/* 손글씨에 없는 글자를 쓰는 언어는 화면 제목도 본문 글꼴 */
:root:not(:lang(ko)):not(:lang(en)) { --font-hand: var(--font); }