/* mallang — 디자인 시스템 정본 (3단계). Tailwind 4 @theme 이름공간, 선언은 :root 에 (#73 — @theme 블록은 브라우저가 읽지 않는다).
   렌즈 minimalist-ui: 글자·선·단추는 평평하고 조용하다 — 색과 움직임은 젤리와 맛 바탕만 쓴다. 그림자 0, 그라데이션은 젤리 몸통 하나뿐. */
:root {
  /* ── 바탕 · 글자 ───────────────────────────── */
  --color-bg: #b4eed5;            /* 멜론 소다 — 장면 1·2·5 바탕. 종이색 아님(C 0.068 · h 167) */
  --color-ink: #1e1428;           /* 자두 먹 — 모든 큰 글자·선·바닥 모서리 */
  --color-mute: #5a4d63;          /* 작은 보조 글자 — 모든 밝은 바탕에서 ≥ 5.4 */
  --color-cream: #fffaf2;         /* 진열대(바닥) · 장면 4 바탕 · 먹 위 글자 */
  --color-mute-on-ink: #a99bb3;   /* 먹 꼬리 위 보조 글자 */
  --color-line: color-mix(in oklab, var(--color-ink) 18%, transparent); /* 1px 머리카락 선 */

  /* ── 강조 — 자두 마젠타. 단추 바탕·바늘만, 면으로 쓰지 않는다(#52) ── */
  --color-accent: #b0179a;
  --color-on-accent: #fffaf2;
  --color-accent-soft: #ff8ae6;   /* 먹 위에서만 — 꼬리 링크 밑줄·담긴 수 */

  /* ── 맛 바탕(장면 3) — 밝고 채도 높은 면, 먹 글자 ≥ 12 ── */
  --color-surface-grape: #d9f59c;
  --color-surface-peach: #ffd3c4;
  --color-surface-plum: #f8c9ef;
  --color-surface-lemon: #fff07d;
  --color-surface-soda: #c4e8ff;

  /* ── 젤리 몸통 · 테두리(deep, 어느 바탕에서도 ≥ 3:1) · 광택 ── */
  --color-jelly-grape: #67c21a;
  --color-jelly-grape-deep: #2f6e05;
  --color-jelly-peach: #ff7d63;
  --color-jelly-peach-deep: #b1361f;
  --color-jelly-plum: #d43bb3;
  --color-jelly-plum-deep: #85106c;
  --color-jelly-lemon: #ffcc1a;
  --color-jelly-lemon-deep: #9a6b00;
  --color-jelly-soda: #36a9f2;
  --color-jelly-soda-deep: #0d5f99;
  --color-jelly-gloss: #ffffff;   /* 광택 하이라이트 — 투명도 0.55~0.8 로만 */

  /* ── 서체 ── */
  --font-display: "Dongle", "Pretendard Variable", sans-serif;   /* 말랑한 한글 — 큰 글자 전용 */
  --font-num: "Unbounded", "Pretendard Variable", sans-serif;    /* 숫자·가격·워드마크 Mallang */
  --font-body: "Pretendard Variable", "Pretendard", system-ui, sans-serif;

  /* ── 글자 크기 (wireframe 4절 폭 표가 이 값으로 계산됨) ──
     Dongle 은 글자 몸이 작다(한글 잉크 높이 ≈ 0.73em) — 크게 잡고 줄 간격을 좁힌다. */
  --text-hero: clamp(5.25rem, 12vw, 10.5rem);     /* 장면 1 헤드라인 · 장면 2 문장 · 장면 4 제목 (≥720) — 4단계: 10vw/9rem 은 첫 화면에서 작아 보여 올림(G1 메모, NOTES) */
  --text-hero--line-height: 0.86;
  --text-hero-m: clamp(3.5rem, 20vw, 6.5rem);     /* 같은 자리 (<720) */
  --text-hero-m--line-height: 0.86;
  --text-flavor: clamp(7rem, 22vw, 20rem);        /* 장면 3 맛 이름 (≥720) */
  --text-flavor--line-height: 0.8;
  --text-flavor-m: clamp(6rem, 34vw, 13rem);      /* 장면 3 맛 이름 (<720) */
  --text-flavor-m--line-height: 0.8;
  --text-title: clamp(2.75rem, 6vw, 6rem);        /* 장면 5 제목 · FAQ 제목 (Dongle) */
  --text-title--line-height: 0.9;
  --text-meter: clamp(3.5rem, 8vw, 7.5rem);       /* 장면 4 말랑 지수 (Unbounded 800, tabular) */
  --text-meter--line-height: 1;
  --text-price: 1.75rem;                          /* 가격 (Unbounded 700) */
  --text-price--line-height: 1.1;
  --text-price-s: 1.375rem;                       /* 가격 <400 (낱봉 2열 — wireframe 폭 표 ✗ 줄의 해결) */
  --text-price-s--line-height: 1.1;
  --text-lede: 1.25rem;                           /* 헤드라인 아래 한 줄 (Pretendard 500) */
  --text-lede--line-height: 1.5;
  --text-body: 1.0625rem;
  --text-body--line-height: 1.65;
  --text-small: 0.875rem;
  --text-small--line-height: 1.5;
  --text-micro: 0.75rem;                          /* 수치 단위·가상 고지 (letter-spacing 0.04em) */
  --text-micro--line-height: 1.4;

  /* ── 간격 ── */
  --spacing-gutter: clamp(1.25rem, 4.4vw, 4rem);  /* 390→20 · 720→32 · 1024→45 · 1199→53 · 1440→63 */
  --spacing-xs: 0.5rem;
  --spacing-s: 1rem;
  --spacing-m: 1.5rem;
  --spacing-l: 2.5rem;
  --spacing-xl: 4rem;
  --spacing-2xl: 7rem;
  --spacing-section: clamp(5rem, 12vw, 10rem);    /* 정적 블록(장면 5·6) 위아래 */
  --spacing-dock: 4rem;                           /* 진열대 높이 ≥720 — 곧 물리 바닥 */
  --spacing-dock-m: 3.75rem;                      /* 진열대 높이 <720 (+ safe-area) */
  --spacing-tile: clamp(7.5rem, 21vmin, 14rem);   /* "말"·"랑" 글자 블록 한 변 */
  --spacing-jelly-s: clamp(2.75rem, 5vmin, 3.5rem);
  --spacing-jelly-m: clamp(3.5rem, 7vmin, 4.75rem);
  --spacing-jelly-l: clamp(4.25rem, 9vmin, 6rem);
  --spacing-jelly-hero: clamp(13rem, 46vmin, 26rem); /* 장면 4 큰 젤리 */
  --spacing-target: 2.75rem;                      /* 터치 타깃 44px */

  /* ── 모서리 — 단단하게(렌즈), 말랑함은 젤리가 맡는다 ── */
  --radius-ui: 8px;          /* 단추 · 칩 */
  --radius-card: 12px;       /* 상품 칸 · FAQ 없음(선만) */
  --radius-tile: 30%;        /* "말"·"랑" 블록 — 둥근 사각 */
  --radius-cube: 26%;        /* 큐브 젤리 */
  --radius-pouch: 18px;      /* 봉지 그림 */

  /* ── 그림자 — 없음. 포커스 링만 그림자 문법을 빌린다 ── */
  --shadow-none: none;
  --shadow-focus: 0 0 0 2px var(--color-cream), 0 0 0 4px var(--color-ink);
  --shadow-focus-on-ink: 0 0 0 2px var(--color-ink), 0 0 0 4px var(--color-cream);

  /* ── 곡선 ── */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);          /* 등장 · 반응 기본 */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);       /* 화면 안에서 A→B */
  /* impeccable-disable-next-line bounce-easing: 이 장의 주제가 젤리의 탄성이다(DESIGN 원칙 2·모션 규칙 Pop in) — 담긴 수·맛 이름이 한 번 넘쳤다 선다. 반복하지 않는다 */
  --ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1);       /* 담긴 수 Pop in · 맛 이름 착지 */
  /* CSS 로 흉내 낸 스프링(감쇠 12 · 강성 380 근사) — 큰 젤리 되돌아옴·눌림 피드백 */
  --ease-spring: linear(0, 0.38 8%, 0.86 18%, 1.1 28%, 1.06 38%, 0.98 52%, 1.01 68%, 1);
}