/*
 * 색 토큰의 원본. 앱과 랜딩이 이 파일 하나의 값을 쓴다.
 * - 앱: app/assets/tailwind/application.css가 @import로 Tailwind 빌드(tailwind.css)에 넣는다. Tailwind 유틸리티(bg-canvas 등)는
 *   같은 파일의 @theme inline reference가 이름만 등록하고 값은 var(--color-*)로 이 파일에서 읽는다.
 * - 랜딩: layouts/landing이 이 파일을 landing.css보다 먼저 불러온다(Propshaft가 tokens.css로 그대로 내보낸다).
 * 이름은 DESIGN.md colors의 이름에 --color- 를 붙인 것이다. 화면 모드는 <html data-theme>이 정한다.
 */
:root {
  /* 밝은 테마 값 */
  --color-canvas: #EDF1EE;       /* 페이지 바탕 */
  --color-surface: #F8FAF8;      /* 카드·패널·상단/하단 막대 */
  --color-field: #FBFCFB;        /* 입력칸 바탕 */
  --color-line: #CDD6D1;         /* 구분선·카드 테두리 */
  --color-line-strong: #7A8B83;  /* 입력칸 테두리. 바탕(canvas, surface, field)과 3:1 이상 */
  --color-ink: #1F2B26;          /* 본문 글자 */
  --color-ink-muted: #56655E;    /* 보조 글자·도움말 */
  --color-accent: #2E6A56;       /* 주 버튼 채움·포커스 */
  --color-accent-hover: #245646; /* 주 버튼 눌림/호버 */
  --color-on-accent: #F6FAF8;    /* accent 위 글자 */
  --color-accent-soft: #DCEAE3;  /* 선택됨·완료 상태 바탕 */
  --color-accent-ink: #2A6150;   /* surface 위 강조 글자·링크 */
  --color-warn-soft: #F7EBD2;    /* 주의 바탕 */
  --color-warn-line: #E2C88F;    /* 주의 테두리 */
  --color-warn-ink: #7D5410;     /* 주의 글자 */
  --color-danger-soft: #F6E3E0;  /* 오류 바탕 */
  --color-danger-line: #E3B2AA;  /* 오류 테두리 */
  --color-danger-ink: #9A3328;   /* 오류 글자 */
  --color-danger: #A63D31;       /* 위험 버튼 채움 */
  --color-on-danger: #FBF3F2;    /* danger 위 글자 */
  --color-neutral-soft: #E6EBE8; /* 초안·만드는 중 배지 바탕, 비활성 버튼, 단계 번호, 두세 칸 선택(.seg) 바탕 */
  --color-kakao: #FEE500;        /* 카카오 로그인 버튼 바탕(카카오 지정 색이라 어두운 테마에서도 같다) */
  --color-kakao-ink: #191600;    /* 카카오 버튼 글자 */

  /* 어두운 테마 값(DESIGN.md의 dark-*). 아래 [data-theme="dark"]가 같은 역할 이름에 옮겨 담는다.
     랜딩은 밝은 테마로 고정하지만 첫 화면과 마지막 구역이 이 값을 그대로 쓴다.
     @theme에 등록하지 않았으므로 Tailwind 유틸리티(bg-dark-canvas 등)는 만들어지지 않는다. */
  --color-dark-canvas: #17211D;
  --color-dark-surface: #1F2B26;
  --color-dark-field: #18231F;
  --color-dark-line: #33433C;
  --color-dark-line-strong: #677D73;
  --color-dark-ink: #E2E8E4;
  --color-dark-ink-muted: #A3B2AA;
  --color-dark-accent: #8CC7AF;
  --color-dark-accent-hover: #A6D6C2;
  --color-dark-on-accent: #10201A;
  --color-dark-accent-soft: #263D34;
  --color-dark-accent-ink: #9CD3BC;
  --color-dark-warn-soft: #3A3122;
  --color-dark-warn-line: #5E4E2E;
  --color-dark-warn-ink: #E7C27F;
  --color-dark-danger-soft: #3D2522;
  --color-dark-danger-line: #6A3A33;
  --color-dark-danger-ink: #F0A196;
  --color-dark-danger: #E58C80;
  --color-dark-on-danger: #2A1310;
  --color-dark-neutral-soft: #2A3631;
}

/* 어두운 테마. <html> 말고 다른 요소에 data-theme="dark"를 달면 그 요소 안만 어두운 값이 된다(스타일 가이드의 어두운 모드 견본이 쓴다). */
:root[data-theme="dark"],
[data-theme="dark"] {
  --color-canvas: var(--color-dark-canvas);
  --color-surface: var(--color-dark-surface);
  --color-field: var(--color-dark-field);
  --color-line: var(--color-dark-line);
  --color-line-strong: var(--color-dark-line-strong);
  --color-ink: var(--color-dark-ink);
  --color-ink-muted: var(--color-dark-ink-muted);
  --color-accent: var(--color-dark-accent);
  --color-accent-hover: var(--color-dark-accent-hover);
  --color-on-accent: var(--color-dark-on-accent);
  --color-accent-soft: var(--color-dark-accent-soft);
  --color-accent-ink: var(--color-dark-accent-ink);
  --color-warn-soft: var(--color-dark-warn-soft);
  --color-warn-line: var(--color-dark-warn-line);
  --color-warn-ink: var(--color-dark-warn-ink);
  --color-danger-soft: var(--color-dark-danger-soft);
  --color-danger-line: var(--color-dark-danger-line);
  --color-danger-ink: var(--color-dark-danger-ink);
  --color-danger: var(--color-dark-danger);
  --color-on-danger: var(--color-dark-on-danger);
  --color-neutral-soft: var(--color-dark-neutral-soft);
}