/* oatnine — 디자인 시스템 정본 (설계 2026-09-26, 방향 B · 뒷면이 앞면)
   Tailwind 4 @theme 이름공간을 쓰되 선언은 :root 에 둔다 — @theme 블록은 브라우저가 읽지 않는다(lessons #73).
   style.css 는 이 변수만 쓴다. 새 색이 필요하면 여기에 먼저 더하고 DESIGN.md 대비표에 실측을 적는다.
   다크 모드 없음 · 모션 없음(인쇄 라벨 — 긴 이미지와 웹이 같아야 한다). */

:root {
  /* ── 색 ─────────────────────────────────────────────── */
  --color-kraft: #dcc49c;        /* 바탕 — 크래프트 봉지. tone mid (OKLCH L 0.83) */
  --color-cream: #f8efdd;        /* 라벨 판·표 바탕 */
  --color-cacao: #2a1a12;        /* 잉크·선·반전 띠 */
  --color-cacao-soft: #5a4232;   /* 보조 글(캡션·메타·주석) */
  --color-berry: #931f55;        /* 강조 — 도장·선택 테두리·:target 막대·포커스. 면으로 칠하지 않는다 */
  --color-honey: #c7862c;        /* 맛 칩: 오리지널 (글자색 금지) */
  --color-cocoa: #6b3f27;        /* 맛 칩: 카카오 */
  --color-ph: #e9d8b6;           /* 자리표시자 바탕 */
  --color-ph-line: #8a6e52;      /* 자리표시자 해칭 — 장식, 글자에 쓰지 않는다 */

  /* ── 서체 ───────────────────────────────────────────── */
  --font-display: "Big Shoulders Display", "Pretendard Variable", Pretendard, sans-serif; /* 숫자·라틴 라벨만 */
  --font-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif; /* 한글 헤드 800 · 본문 400 */

  /* 굵기 */
  --font-weight-body: 400;
  --font-weight-strong: 700;
  --font-weight-head: 800;
  --font-weight-display: 800;

  /* ── 글자 크기 (폰 → -lg 는 ≥780, -md 는 720–779) ─────── */
  --text-micro: 0.75rem;     /* 12 — 표 주석·판 아래 기준치 문장 */
  --text-small: 0.8125rem;   /* 13 — 영양정보 판 줄(3개 가로)·표시 칸 라벨(폰)·캡션 메타 */
  --text-meta: 0.9375rem;    /* 15 — 표시 칸 라벨(≥780)·표 본문 */
  --text-body: 1rem;         /* 16 — 본문(폰) */
  --text-body-lg: 1.0625rem; /* 17 — 본문(≥780) */
  --text-lead: 1.25rem;      /* 20 — 부제·특징 설명 첫 줄 */
  --text-h3: 1.375rem;       /* 22 — 특징 제목(폰) */
  --text-h3-lg: 1.75rem;     /* 28 — 특징 제목(≥780) */
  --text-h2: 1.625rem;       /* 26 — 블록 제목(폰) · 한 줄 ≤ 8em */
  --text-h2-lg: 2.75rem;     /* 44 */
  --text-h1: 2rem;           /* 32 — 폰. 실측 8.926em → 286px ≤ 298(360) */
  --text-h1-md: 3.5rem;      /* 56 */
  --text-h1-lg: 4rem;        /* 64 */
  --text-mark: 2.5rem;       /* 40 — 첫 화면 표시 칸 숫자(폰) */
  --text-mark-lg: 4rem;      /* 64 */
  --text-giant: 9rem;        /* 144 — 특징 거대 숫자(폰) */
  --text-giant-lg: 15rem;    /* 240 — ≥780. 가장 넓은 160° = 350px ≤ 420 */
  --text-word: 1.375rem;     /* 22 — 워드마크 OATNINE */

  /* 행간·자간 */
  --leading-display: 0.86;   /* 거대 숫자 */
  --leading-head: 1.15;      /* H1 */
  --leading-title: 1.25;     /* H2·H3 */
  --leading-body: 1.65;      /* 한글 본문 */
  --leading-table: 1.35;
  --tracking-head: -0.03em;
  --tracking-display: -0.01em;
  --tracking-label: 0.02em;  /* 라틴 대문자 라벨(OATNINE · No.03) */

  /* ── 간격 (4 배수) ──────────────────────────────────── */
  --spacing-1: 0.25rem;  /* 4 */
  --spacing-2: 0.5rem;   /* 8 */
  --spacing-3: 0.75rem;  /* 12 */
  --spacing-4: 1rem;     /* 16 */
  --spacing-5: 1.5rem;   /* 24 */
  --spacing-6: 2rem;     /* 32 */
  --spacing-7: 3rem;     /* 48 */
  --spacing-8: 4rem;     /* 64 */
  --spacing-9: 6rem;     /* 96 */
  --spacing-10: 8rem;    /* 128 */
  --spacing-gutter: 1.25rem;    /* 20 — 폰 좌우 */
  --spacing-gutter-lg: 2.5rem;  /* 40 — ≥720 좌우 */
  --spacing-section: 6rem;      /* 96 — 블록 아래 (조절 손잡이 ② 64~128) */
  --spacing-column: 860px;      /* 가운데 열 최대 폭 = 스마트스토어 내보내기 폭 */
  --spacing-plate: 4000px;      /* 판 높이(≥780) = 내보내기 절단 단위 */
  --spacing-plate-safe: 240px;  /* 판 끝 여유대 최소 — 글자·표·사진 금지 */
  --spacing-label-bar: 3rem;    /* 48 — 라벨 머리 띠(폰 40) */
  --spacing-label-bar-sm: 2.5rem;
  --spacing-hero-overlap: 6rem;     /* 96 — 라벨 판이 첫 사진을 덮는 길이(≥780) */
  --spacing-hero-overlap-sm: 2.5rem; /* 40 — 폰 */
  --spacing-rule-heavy: 8px;    /* 판·블록 시작 */
  --spacing-rule-mid: 3px;      /* 라벨 판 테두리·열량 아래 */
  --spacing-rule-hair: 1px;     /* 표 줄 */
  --spacing-tap: 44px;          /* 최소 터치 높이 */
  --spacing-topbar: 56px;       /* 상단 띠(≥780) — 판 1 은 4000 − 이 값이라 px 로 고정한다(4단계) */
  --spacing-topbar-sm: 48px;    /* 상단 띠(폰) */

  /* ── 모서리·그림자·이징 — 라벨은 각지고 평평하다 ─────── */
  --radius-none: 0;
  --radius-chip: 2px;       /* 맛 칩·도장 */
  --radius-notch: 50%;      /* 절취선 양끝 반원 홈만 */
  --shadow-none: none;      /* 그림자 없음 — 판은 선으로 뜬다 */
  --ease-none: linear;      /* 모션 없음. 전환을 만들지 않는다 */
}