/* ============================================================================
   Popup Studio 디자인 시스템 — 토큰 (vendored)

   출처: claude.ai/design 프로젝트 「Popup Studio Design System」
         projectId c6dd7bb3-711a-4d9a-b91e-a337ac21c7a6
         원본 파일 tokens/fig-tokens.css · tokens/base.css · tokens/fonts.css
   반입일: 2026-07-30

   ⚠️ 이 파일은 **손으로 고치지 않는다.** 값이 바뀌어야 하면 claude.ai/design 쪽을
      고치고 다시 반입한다 — 여기서 고치면 두 곳이 조용히 갈라진다(디자인 시스템을
      쓰는 이유가 사라진다).

   원본에서 **뺀 것과 이유**(재반입할 때 이 목록을 함께 갱신할 것):
   - 다크 모드(`[data-theme=dark]`) — logix 는 다크 모드를 제공하지 않는다. 넣어 두면
     「되는 기능」으로 오해된다.
   - `data-mode=mobile/tablet/large/small` 모드 변수 — 원본은 Figma 프레임 크기별
     변수인데, 우리는 CSS 미디어 쿼리로 반응형을 처리한다.
   - pink(측정용)·`--brand-b-*`(원본에 섞여 있던 붉은 계열 1개)·italic weight 이름 —
     쓰는 곳이 없다.
   - 컴포넌트 치수 변수(--switch-*, --checkbox-*) — 해당 컴포넌트를 아직 안 쓴다.
   ============================================================================ */

/* ── 0. 웹폰트 — Pretendard (self-host · woff2 4종)
      원본은 otf 9종이지만 웹 배포에는 woff2 가 맞고, 실제로 쓰는 굵기는 4종이다.
      같은 파일을 쓰는 형제 프로젝트: popax `src/static/fonts/`. ───────────────── */
@font-face {
    font-family: 'Pretendard';
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    src: url('../../fonts/Pretendard-Regular.woff2') format('woff2');
}
@font-face {
    font-family: 'Pretendard';
    font-weight: 500;
    font-style: normal;
    font-display: swap;
    src: url('../../fonts/Pretendard-Medium.woff2') format('woff2');
}
@font-face {
    font-family: 'Pretendard';
    font-weight: 600;
    font-style: normal;
    font-display: swap;
    src: url('../../fonts/Pretendard-SemiBold.woff2') format('woff2');
}
@font-face {
    font-family: 'Pretendard';
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    src: url('../../fonts/Pretendard-Bold.woff2') format('woff2');
}

:root {
    /* ── 1. 원시 색 (primitives) — 이 값들은 파운데이션에서만 쓴다.
          화면 코드는 아래 §2 시맨틱 토큰을 쓸 것. ───────────────────────────── */
    --white-1000: rgb(255, 255, 255);
    --black-1000: rgb(12, 12, 13);

    --gray-100: rgb(245, 245, 245);
    --gray-200: rgb(230, 230, 230);
    --gray-300: rgb(217, 217, 217);
    --gray-400: rgb(179, 179, 179);
    --gray-500: rgb(117, 117, 117);
    --gray-600: rgb(68, 68, 68);
    --gray-700: rgb(56, 56, 56);
    --gray-800: rgb(44, 44, 44);
    --gray-900: rgb(30, 30, 30);
    --gray-1000: rgb(17, 17, 17);

    /* 브랜드는 무채색이다 — 원본에서 brand-* 는 gray-* 와 같은 값이다.
       (강조색이 정해지면 여기만 바뀐다 → readme.md §반복 개선 1번) */
    --brand-100: rgb(245, 245, 245);
    --brand-200: rgb(230, 230, 230);
    --brand-300: rgb(217, 217, 217);
    --brand-400: rgb(179, 179, 179);
    --brand-500: rgb(117, 117, 117);
    --brand-600: rgb(68, 68, 68);
    --brand-700: rgb(56, 56, 56);
    --brand-800: rgb(44, 44, 44);
    --brand-900: rgb(30, 30, 30);
    --brand-1000: rgb(17, 17, 17);

    --red-100: rgb(254, 233, 231);
    --red-200: rgb(253, 211, 208);
    --red-300: rgb(252, 179, 173);
    --red-400: rgb(244, 119, 106);
    --red-500: rgb(236, 34, 31);
    --red-600: rgb(192, 15, 12);
    --red-700: rgb(144, 11, 9);
    --red-800: rgb(105, 8, 7);
    --red-900: rgb(77, 11, 10);

    --green-100: rgb(235, 255, 238);
    --green-200: rgb(207, 247, 211);
    --green-300: rgb(175, 244, 198);
    --green-400: rgb(133, 224, 163);
    --green-500: rgb(20, 174, 92);
    --green-600: rgb(0, 153, 81);
    --green-700: rgb(0, 128, 67);
    --green-800: rgb(2, 84, 45);
    --green-900: rgb(2, 64, 35);

    --yellow-100: rgb(255, 251, 235);
    --yellow-200: rgb(255, 241, 194);
    --yellow-300: rgb(255, 232, 163);
    --yellow-400: rgb(232, 185, 49);
    --yellow-500: rgb(229, 160, 0);
    --yellow-600: rgb(191, 106, 2);
    --yellow-700: rgb(151, 81, 2);
    --yellow-800: rgb(104, 45, 3);
    --yellow-900: rgb(82, 37, 4);

    --slate-100: rgb(243, 243, 243);
    --slate-200: rgb(227, 227, 227);
    --slate-300: rgb(205, 205, 205);
    --slate-400: rgb(178, 178, 178);
    --slate-500: rgb(148, 148, 148);
    --slate-600: rgb(118, 118, 118);
    --slate-700: rgb(90, 90, 90);
    --slate-800: rgb(67, 67, 67);
    --slate-900: rgb(48, 48, 48);

    /* ── 2. 시맨틱 색 — 화면 코드는 여기부터 쓴다 ─────────────────────────── */
    --background-default-default: var(--white-1000);
    --background-default-default-hover: var(--gray-100);
    --background-default-secondary: var(--gray-100);
    --background-default-secondary-hover: var(--gray-200);
    --background-default-tertiary: var(--gray-300);
    --background-default-tertiary-hover: var(--gray-400);
    --background-brand-default: var(--brand-800);
    --background-brand-hover: var(--brand-900);
    --background-brand-secondary: var(--brand-200);
    --background-brand-secondary-hover: var(--brand-300);
    --background-brand-tertiary: var(--brand-100);
    --background-brand-tertiary-hover: var(--brand-200);
    --background-danger-default: var(--red-500);
    --background-danger-hover: var(--red-600);
    --background-danger-secondary: var(--red-200);
    --background-danger-tertiary: var(--red-100);
    --background-positive-secondary: var(--green-200);
    --background-positive-tertiary: var(--green-100);
    --background-warning-secondary: var(--yellow-200);
    --background-warning-tertiary: var(--yellow-100);
    --background-disabled-default: var(--brand-300);
    --background-utilities-overlay: rgba(0, 0, 0, 0.5);
    --background-utilities-scrim: rgba(255, 255, 255, 0.8);

    --text-default-default: var(--gray-900);
    --text-default-secondary: var(--gray-500);
    --text-default-tertiary: var(--gray-400);
    --text-brand-default: var(--brand-800);
    --text-brand-secondary: var(--brand-600);
    --text-brand-on-brand: var(--brand-100);
    --text-danger-default: var(--red-700);
    --text-danger-on-danger: var(--red-100);
    --text-positive-default: var(--green-800);
    --text-warning-default: var(--yellow-900);
    --text-disabled-default: var(--brand-400);

    --border-default-default: var(--gray-300);
    --border-default-secondary: var(--gray-500);
    --border-default-tertiary: var(--gray-700);
    --border-brand-default: var(--brand-800);
    --border-danger-default: var(--red-700);
    --border-danger-tertiary: var(--red-500);
    --border-positive-default: var(--green-800);
    --border-positive-tertiary: var(--green-500);
    --border-warning-default: var(--yellow-900);
    --border-warning-tertiary: var(--yellow-600);
    --border-disabled-default: var(--brand-400);

    --icon-default-default: var(--gray-900);
    --icon-default-secondary: var(--gray-500);
    --icon-default-tertiary: var(--gray-400);
    --icon-brand-on-brand: var(--brand-100);
    --icon-danger-default: var(--red-700);
    --icon-positive-default: var(--green-800);
    --icon-warning-default: var(--yellow-900);

    /* ── 3. 타이포 — 스케일은 이 10개가 전부다.
          ⚠️ 여기 없는 크기(13px·0.82rem 같은 것)를 새로 만들지 않는다. ──────── */
    --family-sans: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI',
        Roboto, 'Helvetica Neue', Arial, sans-serif;
    --family-mono: 'Pretendard', ui-monospace, 'SFMono-Regular', Menlo, monospace;

    --scale-01: 12px;
    --scale-02: 14px;
    --scale-03: 16px;
    --scale-04: 20px;
    --scale-05: 24px;
    --scale-06: 32px;
    --scale-07: 40px;
    --scale-08: 48px;
    --scale-09: 64px;
    --scale-10: 72px;

    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;

    /* 역할별 타이포 — 화면 코드는 크기 숫자 대신 이 이름을 쓰는 쪽이 낫다 */
    --body-size-small: var(--scale-01);   /* 12 — 보조 설명·배지 */
    --body-size-medium: var(--scale-02);  /* 14 — 본문 기본(데이터 밀집 화면) */
    --body-size-large: var(--scale-03);   /* 16 — 강조 본문 */
    --heading-size-small: var(--scale-04);  /* 20 — h3 */
    --heading-size-base: var(--scale-05);   /* 24 — h2 */
    --heading-size-large: var(--scale-06);  /* 32 — h1 */
    --heading-font-weight: var(--weight-semibold);

    /* ── 4. 간격 — 8 배수 스케일 ────────────────────────────────────────── */
    --space-050: 2px;
    --space-100: 4px;
    --space-150: 6px;
    --space-200: 8px;
    --space-300: 12px;
    --space-400: 16px;
    --space-600: 24px;
    --space-800: 32px;
    --space-1200: 48px;
    --space-1600: 64px;
    --space-2400: 96px;

    /* ── 5. 모서리·테두리·그림자 ────────────────────────────────────────── */
    --radius-100: 4px;   /* 배지·작은 요소 */
    --radius-200: 8px;   /* 기본 — 버튼·인풋·카드 */
    --radius-400: 16px;  /* 큰 카드·미디어 */
    --radius-full: 9999px;

    --stroke-border: 1px;
    --stroke-focus-ring: 2px;

    /* 카드는 그림자보다 1px 테두리로 구분한다. 그림자는 떠 있는 것(드롭다운·모달)만. */
    --shadow-overlay: 0 1px 4px rgba(12, 12, 13, 0.1);

    /* ── 6. 컨트롤 치수 ─────────────────────────────────────────────────── */
    --control-height: 40px;
    --control-height-sm: 32px;
    --input-padding-x: 13px;
    --input-padding-y: 9px;

    /* ⭐ 누를 수 있는 것의 최소 크기 — WCAG 2.2 §2.5.8 은 24px 를 하한으로 두지만
       실무 권장은 44px 다. logix 는 데이터 밀집 화면이라 표 안에서는 32px 를
       하한으로 쓰고, 그 밖에서는 44px 를 쓴다. */
    --touch-min: 44px;
    --touch-min-dense: 32px;

    /* ── 7. 레이아웃 ────────────────────────────────────────────────────── */
    --content-max: 1120px;
    --duration-fast: 120ms;
}