/* Atelier Launch 디자인 토큰 v1 — docs/design.md "방향" (D0, 2026-10-02).
   장면: 혼자 아이디어를 붙잡고 있는 사람이 밤에 노트북으로 "이거 만들어도 될까" 확인하는 작업대.
   재료: 종이(바탕) · 흑연 연필(글자) · 커팅 매트 초록(강조) · 원목(장식 한 점).
   화면 코드는 의미 토큰(--color-* 등)만 쓴다. 원본은 이 파일, public/tokens.css 는 사본 (scripts/contrast.mjs 로 대비 확인). */
:root {
  /* 원시 토큰 — 다른 회사 브랜드 값은 쓰지 않는다 */
  --paper-0: #ffffff;  --paper-50: #f6f4ef; --paper-100: #eeeae2; --paper-200: #e2ddd2;
  --graphite-500: #857e72; --graphite-600: #5c564d; --graphite-900: #1f1d1a;
  --mat-700: #1f6b50;  --mat-800: #185a43; --mat-ink: #17543f; --mat-50: #e4f0e9; --mat-grid: #cfe3d8;
  --wood-500: #a8713f; --wood-50: #f6ece1;
  --brick-700: #a83c2c; --brick-50: #fbece8;
  --amber-800: #8a4f00; --amber-50: #fff1d9;
  --blue-600: #2a5bd7;

  /* 의미 토큰 — 색 */
  --color-bg: var(--paper-50);              /* 바탕: 종이 */
  --color-surface: var(--paper-0);          /* 카드 */
  --color-fill: var(--paper-100);           /* 칩·보조 버튼 채움 */
  --color-text: var(--graphite-900);
  --color-text-muted: var(--graphite-600);
  --color-border: var(--paper-200);         /* 옅은 구분선 (장식) */
  --color-border-strong: var(--graphite-500); /* 입력·칩 테두리 (비텍스트 3:1) */
  --color-primary: var(--mat-700);          /* 주 버튼 — 화면 구역당 하나 */
  --color-primary-hover: var(--mat-800);
  --color-on-primary: #ffffff;
  --color-accent-soft: var(--mat-50);       /* 고른 칩·안내 카드 바탕 */
  --color-accent-ink: var(--mat-ink);       /* 연초록 위 글자 */
  --color-grid: var(--mat-grid);            /* 커팅 매트 모눈 (장식) */
  --color-wood: var(--wood-500);            /* 원목 — 자 눈금 같은 장식, 큰 글자만 */
  --color-wood-soft: var(--wood-50);
  --color-danger: var(--brick-700);         /* 오류 글자 (색 + 문구 함께) */
  --color-danger-bg: var(--brick-50);
  --color-success: var(--mat-ink);
  --color-success-bg: var(--mat-50);
  --color-warn: var(--amber-800);
  --color-warn-bg: var(--amber-50);
  --color-focus: var(--blue-600);

  /* 타이포 — Pretendard (SIL OFL 1.1, jsDelivr). rem 이라 기기 큰 글꼴을 따라간다. 1rem = 16px */
  --font-sans: "Pretendard Variable", Pretendard, system-ui, -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --text-xs: 0.8125rem;  /* 13px 작은 표시 */
  --text-sm: 0.875rem;   /* 14px 보조 */
  --text-md: 1rem;       /* 16px 본문 */
  --text-lg: 1.125rem;   /* 18px 카드 제목 */
  --text-xl: 1.375rem;   /* 22px 구역 제목 */
  --text-hero: clamp(2rem, 1.55rem + 2vw, 2.875rem); /* 32~46px 헤드라인 — 한 화면에 하나 */
  --leading-body: 1.6; --leading-tight: 1.3;
  --weight-regular: 400; --weight-medium: 600; --weight-bold: 700; --weight-heavy: 800;

  /* 간격 (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;

  /* 모양 — 둥글고 가볍게. 카드 16, 버튼·입력 12, 칩 알약 */
  --radius-sm: 8px; --radius-md: 12px; --radius-card: 16px; --radius-pill: 999px;
  --shadow-card: 0 1px 2px rgb(31 29 26 / .05), 0 2px 8px rgb(31 29 26 / .04);
  --tap-min: 44px;
  --content-max: 68rem;  /* 1088px — PC 최대 폭 */

  /* 모션 */
  --duration-fast: 120ms; --duration-base: 200ms;
  --ease-out: cubic-bezier(.2, .8, .2, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    /* 밤의 작업대: 따뜻한 숯색 + 밝힌 매트 초록. 오류도 부드러운 산호색 (진한 빨강 쓰지 않음) */
    --color-bg: #161513;
    --color-surface: #211f1c;
    --color-fill: #2c2a26;
    --color-text: #ede9e2;
    --color-text-muted: #aca59a;
    --color-border: #35322d;
    --color-border-strong: #827b70;
    --color-primary: #86d1ae;
    --color-primary-hover: #a0dcc0;
    --color-on-primary: #10251b;
    --color-accent-soft: #1e3a2e;
    --color-accent-ink: #a6dfc4;
    --color-grid: #2a3a32;
    --color-wood: #c99567;
    --color-wood-soft: #33291f;
    --color-danger: #eba89b;
    --color-danger-bg: #3a2622;
    --color-success: #a6dfc4;
    --color-success-bg: #1e3a2e;
    --color-warn: #f0b866;
    --color-warn-bg: #3a2b14;
    --color-focus: #8fb1ff;
    --shadow-card: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root { --duration-fast: 0ms; --duration-base: 0ms; }
}