/* ═════════════════════════════════════════════════════════════
   작업실 디자인 시스템 — 토큰
   블로그(labdawn.com)와 어드민이 같이 쓴다. 원본은 이 파일 하나.

   색은 light-dark(라이트, 야간) 로 한 번에 적는다.
   - 기본: 시스템 설정을 따른다 (어드민)
   - <html data-theme="light|dark"> 가 있으면 그쪽으로 고정 (블로그의 작업등 당김줄)
   컨셉: 「차고 한켠의 작업실」 — 종이 위에 안전 주황(작업기록)·설계도 파랑(노트),
         형광 노랑은 포인트로만.
   ═════════════════════════════════════════════════════════════ */

:root {
  color-scheme: light dark;

  /* ── 바탕 · 글자 ── */
  --bg: light-dark(#fbfaf7, #121214);
  --surface: light-dark(#ffffff, #1a1a1d);
  --surface-2: light-dark(#f5f3ee, #212125); /* 읽기 전용 칸, 눌린 버튼 */
  --text: light-dark(#19191d, #ecebe8);
  --muted: light-dark(#64625c, #a3a29c);
  --faint: light-dark(#a3a097, #6c6b66);
  --line: light-dark(#e9e6df, #2a2a2e);
  --line-strong: light-dark(#d9d4c9, #3a3a40); /* 입력칸·버튼 테두리 */
  --ink: #19191d; /* 테마와 상관없이 늘 검정 (라벨 테이프, 계기판) */
  --on-accent: #ffffff;

  /* ── 브랜드 ── */
  --accent: light-dark(#f0611f, #ff7a3d); /* 안전 주황 — 작업기록·주요 동작 */
  --accent-ink: light-dark(#c2470e, #ff9461); /* 작은 글자용 (대비 확보) */
  --accent-soft: light-dark(#ffeadc, #3a2115);
  --note: light-dark(#2f5bea, #7d9bff); /* 설계도 파랑 — 노트 */
  --note-soft: light-dark(#e7edff, #1b2342);
  --marker: light-dark(#ffe45c, rgba(255, 210, 0, 0.38)); /* 형광펜 */

  /* ── 상태 ── */
  --ok: light-dark(#1f8a5b, #4cc38a);
  --ok-soft: light-dark(#dff3e9, #12301f);
  --danger: light-dark(#c8352b, #ff6b5e);
  --danger-soft: light-dark(#fde7e4, #3a1714);

  /* ── 작업실 소품 ── */
  --code-bg: light-dark(#f4f2ec, #1e1e21);
  --grid: light-dark(rgba(25, 25, 29, 0.06), rgba(255, 255, 255, 0.045)); /* 커팅 매트 */
  --tape: light-dark(rgba(222, 205, 168, 0.62), rgba(205, 185, 145, 0.3)); /* 마스킹 테이프 */
  --paper: light-dark(#fff1a6, #ecd97c); /* 포스트잇 */
  --paper-ink: #8a5d00; /* 포스트잇 위 손글씨 */
  --board: light-dark(#f3eee3, #18181a); /* 타공판 */
  --hole: light-dark(rgba(60, 45, 20, 0.13), rgba(255, 255, 255, 0.07));
  --bench: light-dark(#d8c3a0, #3b3229); /* 작업대 선반 */
  --caution: #ffc21a; /* 공사장 노랑 */
  --caution-ink: light-dark(#8a5d00, #ffc21a); /* 공사장 노랑 글씨 (대비 확보) */
  --dymo: light-dark(#1f1f23, #c8352b); /* 라벨 테이프 */
  --tarp: light-dark(#c8bea7, #44413a); /* 방수포 — 멈춘 프로젝트 */
  --tarp-fold: light-dark(rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.05));
  --cardboard: light-dark(#d9b67f, #5e472b); /* 출고 박스 — 끝낸 프로젝트 */
  --cardboard-ink: light-dark(#3a2a17, #f0dcb8);
  --label: #fbfaf5; /* 배송 라벨 종이 — 테마와 상관없이 흰 종이 */
  --label-red: #c8352b;
  --blueprint: light-dark(#1f4fd1, #142c74); /* 설계도면 — 노트 */
  --logline: light-dark(rgba(25, 25, 29, 0.07), rgba(255, 255, 255, 0.05)); /* 작업 일지 줄 */
  --margin-line: light-dark(rgba(200, 53, 43, 0.35), rgba(255, 107, 94, 0.28)); /* 작업 일지 여백선 */
  --brass: #8d6c3c; /* 기념 명판 — 테마와 상관없이 같은 동판 */
  --brass-light: #a07c46;
  --brass-dark: #5a4222;
  --brass-ink: #f4e4bf;

  /* ── 글꼴 ── */
  --font-sans: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, 'Apple SD Gothic Neo',
    'Noto Sans KR', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-hand: 'Nanum Pen Script', var(--font-sans); /* 손글씨 — 장식에만 */
  --font-stencil: 'Saira Stencil One', var(--font-mono); /* 스텐실 — 영문 간판에만 */

  /* ── 글자 크기 ── */
  --text-2xs: 11px;
  --text-xs: 12px;
  --text-sm: 13.5px;
  --text-md: 15px;
  --text-base: 16px;
  --text-lg: 17.5px;
  --text-xl: 20px;
  --text-2xl: 26px;
  --text-3xl: 34px;
  --text-display: clamp(30px, 6.4vw, 44px);

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

  --leading-tight: 1.3;
  --leading: 1.6;
  --leading-loose: 1.85; /* 긴 본문 */
  --tracking-tight: -0.03em; /* 큰 제목 */

  /* ── 간격 (4px 단위) ── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ── 모서리 ── */
  --radius-xs: 3px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --radius-pill: 999px;
  --radius: var(--radius-lg);

  /* ── 컨트롤 높이 ── */
  --control-sm: 32px;
  --control-md: 40px;
  --control-lg: 48px;

  /* ── 그림자 ── */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 6px 16px -10px rgba(40, 30, 10, 0.35);
  --shadow-pop: 0 12px 32px -12px rgba(20, 15, 5, 0.35), 0 2px 6px rgba(0, 0, 0, 0.06);
  --shadow-lift: 0 14px 28px -14px rgba(70, 50, 0, 0.45);

  /* ── 움직임 ── */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-spring: cubic-bezier(0.3, 1.5, 0.5, 1);
  --dur-fast: 150ms;
  --dur: 250ms;
  --dur-slow: 450ms;

  /* ── 초점 표시 ── */
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent);
  --focus-ring-danger: 0 0 0 3px color-mix(in srgb, var(--danger) 30%, transparent);

  /* ── 레이아웃 ── */
  --maxw: 720px; /* 틀 (좌우 여백 포함) */
  --maxw-wide: 1160px; /* 넓은 화면(1200px~)의 틀 — 안쪽 1120 */
  --maxw-read: 760px; /* 글 본문 읽기 폭 — 한 줄에 한글 45자 안팎 */
}

/* 테마 고정 (블로그) */
:root[data-theme='light'] {
  color-scheme: light;
}

:root[data-theme='dark'] {
  color-scheme: dark;
}