/* akaito Visual Identity v0.1 — color token (#263)
 *
 * 이 파일이 공개 웹(site/)의 색 정본이다. 페이지별 컴포넌트 CSS는 각 문서에 두고,
 * 여기에는 「브랜드 색」과 「테마별 역할 색」만 둔다.
 *
 * 층은 셋이다.
 *   1. 브랜드 층  — 값의 출처. akaito를 akaito로 만드는 네 색이 여기서만 정의된다.
 *   2. 팔레트 층  — Light/Dark 각각이 브랜드 색을 어떻게 쓰는지. 값은 안 만들고 고른다.
 *   3. 역할 층    — --surface, --text 같은 쓰임 이름. 컴포넌트는 이것만 쓴다.
 *
 * 기본은 Light다. 사용자가 토글로 어둡게 고르면 data-theme="dark"가 붙고, 그 선택은
 * localStorage에 남아 다음 방문과 404에도 이어진다.
 *
 * ⚠ OS 설정(prefers-color-scheme)을 따르지 않는다 — 의도한 결정이다.
 *   #263은 「메인 인상이 너무 어둡다」는 피드백에서 출발했다. OS를 따르면 다크 OS
 *   방문자의 첫 화면이 다시 전부 어두워져 그 탐색의 결론이 첫 방문에서 사라진다.
 *   랜딩은 브랜드가 첫 장면을 정하는 매체이므로 akaito의 기본 얼굴을 Warm Paper로
 *   고정하고, Dark는 동등한 선택 표현으로 남긴다. (PR #267 · 리뷰어 2인 제안)
 *   ⚠ 이 판단을 되돌려 OS를 따르게 하려면 미디어쿼리 블록을 되살리는 것만으로는
 *     부족하다 — 검사 ①이 「OS를 따르지 않는다」를 불변식으로 들고 있으므로 거기도
 *     함께 고쳐야 한다. 결정이 두 곳에 적혀 있다는 뜻이 아니라, 결정을 바꾸면
 *     검사가 먼저 막아선다는 뜻이다.
 *
 * 검사: `node tools/check-brand-tokens.mjs` — 이 파일이 주석으로 주장하는 것들을
 *       기계가 지킨다. 값의 출처가 하나인지, 대비 수치가 실제와 맞는지(인라인 주석
 *       전부와 ⑪에 이름 붙인 주장들), 실이 두 테마에서 같은지, OS를 따르지 않는지,
 *       favicon.svg의 복제본이 갈라지지 않았는지. 천장 표는 대상이 아니다.
 *       아직 CI에 걸려 있지 않으므로(#271) 이 파일을 고치면 직접 돌린다.
 */

:root{
  /* ---------- 1. 브랜드 층 (값은 여기서만 만든다) ---------- */
  /* 붉은 실은 반투명으로도 쓰이므로 성분을 따로 둔다. 불투명하게 쓰는 자리와
     반투명하게 쓰는 자리가 같은 성분을 보므로, 색 자체는 아래 한 줄만 고치면 된다.
     ⚠ 「한 줄」은 색 값에 한한 이야기다. 대비 수치가 딸려 오므로 실제로 손대야 하는
       곳은 더 있다 — 이 파일 맨 아래 각주에 적어 두었다. */
  --brand-red-rgb: 183, 40, 46;
  --brand-red:   rgb(var(--brand-red-rgb));  /* Akaito Red — 赤い糸. 연결. 브랜드의 중심색.
                                                茜(akane) 계열. #263에서 후보 비교 끝에 확정했다 */
  --brand-coral-rgb: 240, 101, 75;
  --brand-coral: rgb(var(--brand-coral-rgb));  /* Encounter Coral — 발견, 순간, active state */
  --brand-black: #17100E;                    /* Thread Black — 난색 계열의 매우 어두운 검정 */
  --brand-paper: #F0E7E0;                    /* Warm Paper — 종이, 일상, 사람의 온도 */

  /* 아래 둘은 브랜드 마크(매듭)에서만 쓴다. 화면 UI 에는 아직 쓰이는 곳이 없지만
     여기 두는 이유는 favicon.svg 가 이 값을 복제하고 검사 ⑩ 이 그 복제를 대조하기
     때문이다 — 정본이 여기 없으면 대조할 대상이 없다. */
  --brand-outline: #6E171C;                  /* Knot Shadow — 가닥이 겹치는 자리의 그림자.
                                                바탕색으로 두면 밝은 바탕에서 흰 테두리가 된다 */
  --brand-sheen: #7C1A20;                    /* Knot Sheen — 끈의 음영. 한가운데가 아니라
                                                한쪽으로 치우쳐 놓는다(가운데면 흰 줄로 보인다) */

  /* 명조 폴백. 웹폰트를 부르는 페이지와 안 부르는 페이지가 같은 꼬리를 쓰도록 여기 둔다.
     ⚠ Apple SD Gothic Neo는 고딕이라 넣지 않는다 — 넣으면 macOS에서 명조 폴백을
       건너뛰고 고딕으로 떨어진다. */
  --serif-fallback: AppleMyungjo, Batang, serif;

  /* ---------- 2. 팔레트 층 ---------- */
  /*
   * 괄호 안은 WCAG 대비다. surface / surface-2 두 바탕 모두에서 잰다.
   *   AA 본문 4.5 · AA 대형 3.0 · 비텍스트(1.4.11) 3.0
   *
   * ⚠ 규칙: surface-2(올라온 면)는 두 테마 모두 surface보다 밝다.
   *   어두운 쪽이 이미 그러해서(#17100E → #1F1614) 밝은 쪽도 같은 방향으로 맞췄다.
   *   덕분에 Light --accent가 패널 위에서도 5.64로 본문 기준을 넘긴다.
   */
  --l-surface:   var(--brand-paper);
  --l-surface-2: #F8F2ED;   /* 한 겹 올라온 면 */
  --l-text:      var(--brand-black);  /* 15.41 / 16.94 */
  --l-text-2:    #55403A;   /*  7.89 /  8.67 — 본문·부연 */
  --l-text-3:    #6B5850;   /*  5.49 /  6.03 — 캡션·라벨. 본문에도 쓰이므로 4.5를 넘긴다 */
  --l-edge:      #8A756B;   /*  3.56 /  3.91 — 컨트롤 경계 전용(1.4.11) */
  --l-line:      #DCCEC4;   /*  1.26 /  1.38 — 구분선. 장식이라 3:1을 적용하지 않는다 */
  --l-accent:    var(--brand-red);    /*  5.13 /  5.64 */
  --l-glow:      rgba(var(--brand-red-rgb), .14);
  --l-dot:       #CDBBAF;   /*  1.52 /  1.67 */
  --l-route:     #E0D2C8;   /*  1.21 /  1.33 */

  --d-surface:   var(--brand-black);
  --d-surface-2: #1F1614;
  --d-text:      var(--brand-paper);  /* 15.41 / 14.55 */
  --d-text-2:    #B29E94;   /*  7.35 /  6.94 */
  --d-text-3:    #948075;   /*  5.02 /  4.74 */
  --d-edge:      #7C6960;   /*  3.62 /  3.42 */
  --d-line:      #33241F;   /*  1.27 /  1.19 */
  --d-accent:    var(--brand-coral);  /*  5.97 /  5.64 */
  --d-glow:      rgba(var(--brand-coral-rgb), .16);
  --d-dot:       #4A3831;   /*  1.70 /  1.61 */
  --d-route:     #3B2A25;   /*  1.38 /  1.30 */

  /* 붉은 실. 그은 실은 어느 테마에서도 같은 잉크(--brand-red — paper 5.13 · ink 3.01)지만,
     아직 닿지 않은 실과 매듭은 알파를 테마별로 갈라 체감을 맞춘다. 같은 알파를 쓰면
     어두운 바탕에서 눈에 띄게 더 옅어진다(.28 기준 paper 1.55 ↔ ink 1.23).
     ⚠ 실은 장식이라(aria-hidden) 비텍스트 대비 3:1 대상이 아니다. 아래 수치는
       「양쪽에서 비슷하게 보이는가」를 맞춘 값이지 준수 근거가 아니다.
     ⚠ 어두운 쪽 알파는 밝은 쪽 「결과」에 맞춰 잡는다. 빨강을 바꾸면 밝은 쪽 수치가
       먼저 움직이므로, 알파를 그대로 두면 두 테마가 조용히 어긋난다(茜로 바꿀 때
       실제로 1.55 ↔ 1.43으로 벌어졌다). 밝은 쪽 알파는 의도로 두고 어두운 쪽만 맞춘다. */
  --l-thread-dim:  rgba(var(--brand-red-rgb), .28);  /* 1.55 */
  --l-thread-node: rgba(var(--brand-red-rgb), .42);  /* 1.96 */
  --l-accent-line: rgba(var(--brand-red-rgb), .50);  /* 2.26 — 인용 좌측선·단계 연결선·앵커 테두리 */
  --d-thread-dim:  rgba(var(--brand-red-rgb), .49);  /* 1.56 */
  --d-thread-node: rgba(var(--brand-red-rgb), .67);  /* 1.96 */
  --d-accent-line: rgba(var(--brand-red-rgb), .78);  /* 2.26 */

  /* ---------- 3. 역할 층 — 초기값은 Light ---------- */
  --surface:     var(--l-surface);
  --surface-2:   var(--l-surface-2);
  --text:        var(--l-text);
  --text-2:      var(--l-text-2);
  --text-3:      var(--l-text-3);
  --edge:        var(--l-edge);
  --line:        var(--l-line);
  --accent:      var(--l-accent);
  --glow:        var(--l-glow);
  --dot:         var(--l-dot);
  --route:       var(--l-route);
  --thread-dim:  var(--l-thread-dim);
  --thread-node: var(--l-thread-node);
  --accent-line: var(--l-accent-line);
  --thread:      var(--brand-red);
  color-scheme: light;
}

/* 사용자가 토글로 어둡게 골랐을 때. 이 블록 하나가 Dark 표현의 전부다 —
   OS를 따르지 않기로 했으므로 같은 매핑을 미디어쿼리에 한 번 더 적을 일이 없다. */
:root[data-theme="dark"]{
  --surface:     var(--d-surface);
  --surface-2:   var(--d-surface-2);
  --text:        var(--d-text);
  --text-2:      var(--d-text-2);
  --text-3:      var(--d-text-3);
  --edge:        var(--d-edge);
  --line:        var(--d-line);
  --accent:      var(--d-accent);
  --glow:        var(--d-glow);
  --dot:         var(--d-dot);
  --route:       var(--d-route);
  --thread-dim:  var(--d-thread-dim);
  --thread-node: var(--d-thread-node);
  --accent-line: var(--d-accent-line);
  color-scheme: dark;
}

/*
 * ⚠ 지키는 규칙. 값만 보고는 안 보이므로 여기 적는다.
 *
 * ① 두 빨강은 교체 가능한 형제가 아니라 테마별 전용 토큰이다.
 *    Coral은 어두운 바탕에서만 글자가 된다 (ink 5.97 ↔ paper 2.58 — 대형도 실패).
 *    Red는 반대로 밝은 바탕에서 글자가 된다 (paper 5.13 ↔ ink 3.01 — 대형 전용).
 *    ⚠ 茜로 바꾸며 ink 쪽이 좁아졌다 — #C0342B 때의 3.37에서 3.0052로 좁아졌다.
 *      대형(3.0)에서 0.0052밖에 안 남는다. 표시값 3.01만 보고 「0.01 남았다」로 읽으면
 *      실제의 두 배다 — 반올림한 뒤에 빼면 안 된다(아래 ⚠와 같은 함정이다).
 *      여기는 더 못 민다. Red를 어두운 바탕의 글자로 쓰지 않는 규칙이 그래서 더 중요해졌다.
 *    그래서 --accent를 테마별로 갈랐다. 컴포넌트는 --accent만 쓰고 어느 빨강인지
 *    묻지 않는다. --brand-red / --brand-coral을 글자색으로 직접 쓰지 않는다.
 *
 * ② 붉은 실만은 두 테마에서 같은 --brand-red다. accent까지 전부 바뀌는 마당에
 *    실마저 바뀌면 브랜드에 중심축이 남지 않는다.
 *
 * ⚠ Akaito Red를 다시 바꾸려면 여기부터 본다. Light의 --accent는 본문에도 쓰이므로
 *   두 밝은 바탕 모두에서 4.5를 넘겨야 한다. 통과하는 가장 밝은 명도는 명도 혼자
 *   정하지 않는다 — 색상과 채도가 함께 천장을 내린다. 그중 색상이 더 크게 움직인다.
 *
 *     채도 63% 고정, 색상별 천장   355° 47.5 · 0° 47.7 · 5° 46.0 · 10° 44.1 · 20° 39.9
 *     색상 355° 고정, 채도별 천장   40% 48.0 · 63% 47.5 · 80% 45.2 · 100% 41.6
 *
 *   색상 355→20°가 7.6pt를 움직이는 동안 채도 40→100%는 6.4pt를 움직인다.
 *   ⚠ 값은 8비트로 반올림한 뒤(= 실제로 나가는 hex로) 쟀고, 내림해서 적었다.
 *     반올림 전 값으로 재면 통과처럼 보이는 색이 실제로는 미달이다 — 이 파일이
 *     한 번 그렇게 틀렸다. hsl(350°,46%,48%)는 4.5034처럼 보이지만 #B34255로
 *     양자화하면 4.4972다.
 *   ⚠ 그러니 「명도 몇 % 아래면 안전」이라고 외우지 말 것. 채도나 색상을 같이
 *     올리면 같은 명도에서도 떨어진다. 위 표가 허용하는 47.5%보다 낮은
 *     hsl(5°,63%,47%) = #C3392C 가 4.37로 미달인 것이 그 예다.
 *     고쳤으면 검사를 돌려서 확인한다.
 *
 *   茜는 HSL(357.5°, 64.1%, 43.7%)로 5.13이고, 4.5까지 0.63 남는다.
 *   (茜 이전의 #C0342B는 4.57로 여유가 0.07뿐이었다.)
 *   함께 고쳐야 하는 곳: 위 실 알파 여섯 줄, 이 파일의 대비 주석, 그리고 site/favicon.svg.
 *   ⚠ 검사가 잡는 범위는 선언 뒤 인라인 주석(⑧)과 ⑪에 이름 붙인 주장, 그리고
 *     favicon의 복제본(⑩)까지다. 위 천장 표와 그 아래 두 반례는 특정 색이 아니라
 *     탐색 결과라 아무도 안 본다 — 사람이 다시 재야 한다.
 *     ⚠ 다시 재야 하는 조건이 「빨강을 바꿀 때」가 아니다. 그 표는 빨강에 의존하지
 *       않는다 — --l-surface 와 --l-surface-2 의 함수다. 밝은 바탕을 조금만 옮겨도
 *       돈다(#F0E7E0 → #F4EBE4 로만 옮기면 반례 #C3392C 가 4.37에서 4.53으로
 *       뒤집혀 반례가 아니게 된다). **빨강이나 밝은 바탕**을 바꾸면 다시 잰다.
 *       ⚠ 이 절은 「Akaito Red를 다시 바꾸려면」으로 열려 있어서 바탕을 바꾸는
 *         사람은 여기로 오지 않는다. 바탕을 만지면 여기도 봐야 한다.
 *     「검사만 돌리면 된다」로 닫지 말 것.
 */