/* 이 파일은 bookjeok-frontend-shared/css/tokens.css 에서 복사됩니다. 직접 고치지 마세요.
   원본을 고친 뒤 node bookjeok-frontend-shared/scripts/sync-partials.mjs 를 실행하면 반영됩니다. */

/* ============================================================
   디자인 토큰 — Figma 스타일가이드 기준
   출처: Figma `북적북적` 파일, 스타일가이드 페이지 `70:2`
     · 색   cvg-color-guide `52:3458`
     · 타입 Typography `70:3` (web `70:147` / mobile `70:18`)
     · 컴포넌트 `52:5343`
   값을 여기 말고 다른 데 쓰지 않는다. 하드코딩된 색·치수는 전부 var(--…) 로 바꾼다.
   이 파일이 원본이며 bookjeok-web / bookjeok-admin 쪽은
   scripts/sync-partials.mjs 가 복사한다. 복사본을 직접 고치지 마세요.
   ============================================================ */

:root {
  /* ---- Grayscale (Figma Grayscale/000 ~ 900) ---- */
  --gray-900: #0a0a0a;
  --gray-800: #1a1a1a;
  --gray-700: #333333;
  --gray-600: #737373;
  --gray-500: #a8a8a8;
  --gray-400: #e6e6e6;
  --gray-300: #f2f2f2;
  --gray-200: #f7f7f7;
  --gray-100: #fcfcfc;
  --white: #ffffff; /* = Figma Grayscale/000 */

  /* ---- Primary (Figma Primary/50 ~ 900) ---- */
  --primary-050: #fff2ea; /* Primary/50 */
  --primary-100: #ffddc9;
  --primary-200: #ffb68c;
  --primary-300: #ff8a4d;
  --primary-400: #fa6a1e;
  --primary-500: #f45102; /* 브랜드 기본. 흰 배경 위 3.49:1 → 작은 글씨 금지 */
  --primary-600: #e14700;
  --primary-700: #bd3a00; /* 흰 글씨 5.57:1 → 글씨가 올라가는 채움면에 쓴다 */
  --primary-800: #942d00;
  --primary-900: #6e2100;

  /* ---- 장식 배경 (Figma Background/*) ----
     히어로 장식원처럼 글씨가 올라가지 않는 면에만 쓴다. */
  --bg-orange: #f45102;
  --bg-yellow: #ffd900;
  --bg-blue: #00beff;

  /* ---- 의미 색 ---- */
  --bg: var(--white);
  --bg-subtle: var(--gray-200);
  --text: var(--gray-900);
  --text-strong: var(--gray-800); /* 시안의 제목·메뉴 라벨 기본값 */
  /* 보조 텍스트 하한선. 흰 배경 4.74:1 · --gray-100 위 4.62:1 까지는 통과하지만
     --gray-200 위에서는 4.43:1 로 미달이라 그때는 --gray-700 을 쓴다. */
  --text-muted: var(--gray-600);
  --text-disabled: var(--gray-500); /* 2.38:1 — 비활성·장식 전용, 본문 금지 */
  --border: var(--gray-400);
  --border-strong: var(--gray-600); /* 시안 Mute 버튼 테두리 */
  --link: var(--primary-700);
  --focus: var(--primary-700);

  /* ---- 상태 (Figma Positive / Negative / Warning) ----
     시안의 500 값은 면·테두리·점·아이콘용이다. 글자로 쓰면 4.5:1 에 미달한다
     (흰 배경 위 Positive 3.53 · Negative 4.15 · Warning 4.59, 연한 배경 위는 더 낮다).
     그래서 --primary-700 과 같은 방식으로 색조를 유지하고 명도만 낮춘
     텍스트 전용 파생값을 따로 둔다. 글자에는 -text 쪽을 쓴다. */
  --success: #109e28;      /* Positive/500 — 면·테두리·점 */
  --success-bg: #e6fae9;   /* Positive/100 */
  --success-text: #0d8221; /* 파생. 흰 5.0:1 · 연한 배경 4.5:1 */
  --danger: #eb3609;       /* Negative/500 */
  --danger-bg: #ffefeb;    /* Negative/100 */
  --danger-text: #d13008;  /* 파생. 흰 5.1:1 · 연한 배경 4.5:1 */
  --warning: #947000;      /* Warning/500 */
  --warning-bg: #fcf5de;   /* Warning/100 */
  --warning-text: #8d6a00; /* 파생. 흰 5.0:1 · 연한 배경 4.6:1 */
  /* info 는 시안에 대응 색이 없다. 관리자 .badge--info / .banner--info 가 쓰는
     프로젝트 자체 확장이다. 시안에 추가되면 이 두 줄을 교체한다. */
  --info: #1d4ed8;
  --info-bg: #eaf0fe;

  /* ---- 폐기 예정 별칭 ----
     지시서 11 의 임시값(--surface #535353, --nav #232323)이었다. 시안 시스템에는
     없는 색이라 Grayscale/900 으로 수렴시켰다. bookjeok-admin 의 layout.css /
     pages.css 가 아직 참조하므로 별칭으로 남긴다. 새 코드에서는 쓰지 않는다. */
  --surface: var(--gray-900);
  --nav: var(--gray-900);

  /* ---- 타이포 ---- */
  --font-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
    system-ui, "Apple SD Gothic Neo", "Malgun Gothic", "맑은 고딕", sans-serif;

  /* Figma 의 letterSpacing -0.5 는 px 가 아니라 퍼센트다.
     16px → -0.08px, 18px → -0.09px, 36px → -0.18px 로 계산된다.

     주의: letter-spacing 은 em 으로 써도 **선언한 지점의 글자 크기로 px 확정되어
     상속된다.** body 에 한 번만 걸면 모든 글자가 16px 기준값(-0.08px)을 물려받아
     제목이 시안보다 덜 좁아진다. 그래서 글자 크기를 바꾸는 규칙마다
     letter-spacing 을 다시 선언한다 (base/components/layout/pages 전부 그렇게 되어 있다). */
  --tracking: -0.005em;
  --tracking-small: 0; /* mobile/Smalltext·SmalltextEm 만 자간 0 */

  --fs-h1: 2.25rem;      /* 36 — web/Headline1  ExtraBold */
  --fs-h2: 1.75rem;      /* 28 — web/Headline2  ExtraBold */
  --fs-h3: 1.375rem;     /* 22 — web/Headline3  ExtraBold */
  --fs-h4: 1.125rem;     /* 18 — web/Headline4  Bold */
  --fs-body: 1rem;       /* 16 — web/Body 500 · web/BodyEm 700 */
  --fs-caption: 0.875rem;/* 14 — web/Caption 500 · web/CaptionEm 700 */
  --fs-small: 0.75rem;   /* 12 — mobile/Smalltext 500 · SmalltextEm 600 */

  --lh-h1: 3.5rem;       /* 56 */
  --lh-h2: 2.625rem;     /* 42 */
  --lh-h3: 2rem;         /* 32 */
  --lh-h4: 2rem;         /* 32 */
  --lh-body: 1.75rem;    /* 28 */
  --lh-caption: 1.5rem;  /* 24 */
  --lh-small: 1.25rem;   /* 20 */

  --fw-regular: 400;
  --fw-medium: 500;    /* Body, Caption, Smalltext */
  --fw-semibold: 600;  /* mobile/CaptionEm, SmalltextEm, 헤더 태그라인 */
  --fw-bold: 700;      /* BodyEm, CaptionEm, web/Headline4 */
  --fw-extrabold: 800; /* Headline1~3 */

  /* ---- 간격 (4px 배수) ---- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;

  /* ---- 모양 ---- */
  /* 시안 실측값으로만 구성한다. 16px 은 시안에 없어서 뺐다. */
  --radius-sm: 4px;
  --radius: 8px;    /* 입력란 `52:5315` */
  --radius-md: 10px; /* 푸터 후원 카드 `173:823`, 드롭다운 패널 */
  --radius-lg: 12px; /* 필터 패널 `173:524` */
  --radius-xl: 18px; /* 그림책 카드 표지 `173:564` */
  --radius-pill: 999px; /* 시안은 1000px. 알약이므로 결과가 같다 */

  /* Figma shadow_default — DROP_SHADOW #0000001F, offset (0,4), radius 20 */
  --shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
  /* 아래 둘은 시안에 없는 파생값이다. 시안에 정의가 생기면 교체한다. */
  --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.16);

  /* Figma blur — BACKGROUND_BLUR radius 20.
     Figma 반경은 CSS backdrop-filter 의 2배로 대응된다 → 10px */
  --blur-header: 10px;

  /* ---- 레이아웃 ---- */
  --content-w: 1344px;  /* 시안 본문 폭 */
  --gutter: 48px;       /* 시안 좌우 여백 (1440 프레임에서 x=48) */
  --container: calc(var(--content-w) + 2 * var(--gutter)); /* = 1440px */
  --container-narrow: 760px;
  --header-h: 56px;
  --sidebar-w: 240px; /* bookjeok-admin 전용 */

  /* 중단점. @media 안에서는 var() 를 쓸 수 없으므로 리터럴을 병기한다.
     모바일 390 / 태블릿 768 / 데스크톱 1440 (시안 프레임 폭) */
  --bp-tablet: 768px;
  --bp-desktop: 1440px;

  --z-header: 100;
  --z-dropdown: 200;
  --z-modal: 300;
  --z-toast: 400;
}

/* ============================================================
   모바일 타입 스케일 (Figma mobile/*)
   같은 토큰을 재정의하므로 소비 측 CSS 는 한 줄도 고치지 않아도 된다.
   768px = var(--bp-tablet)
   ============================================================ */
@media (max-width: 768px) {
  :root {
    --fs-h1: 1.5rem;     /* 24 — mobile/Headline1 */
    --fs-h2: 1.25rem;    /* 20 — mobile/Headline2 */
    --fs-h3: 1.125rem;   /* 18 — mobile/Headline3 */
    /* mobile 스케일에 Headline4 가 없다. mobile/BodyEm(16/28) 으로 파생했다. */
    --fs-h4: 1rem;       /* 16 */

    --lh-h1: 2.375rem;   /* 38 */
    --lh-h2: 2rem;       /* 32 */
    --lh-h3: 1.875rem;   /* 30 */
    --lh-h4: 1.75rem;    /* 28 */

    --gutter: var(--sp-5); /* 20px — 시안 모바일 프레임(390) 기준 */
  }
}