/* =========================================================
   FIAS 사이트 통일 디자인 토큰 — 화이트 미니멀 + 리치 바이올렛 포인트
   이 파일에는 :root 토큰만 들어간다. 컴포넌트 규칙은 절대 넣지 말 것.

   소비자(둘 다 <link>로 이 파일을 먼저 읽는다):
     - public/index.html        → /css/style.css 앞
     - public/field-admin/index.html → ./styles.css 앞
   ⚠ 버전쿼리(?v=)를 올릴 때는 위 두 파일을 함께 고쳐야 한다.
     한쪽만 올리면 그 페이지만 옛 토큰을 계속 본다.

   원본은 public/css/style.css:1307-1351 이었다. 2단계 배포에서 style.css 쪽
   중복을 지운다 — 지금은 바이트 동일한 중복이라 캐스케이드 순서가 무관하고,
   구 HTML을 캐시한 클라이언트가 var(--ui-slate)를 잃어 사이트 전체 브랜드색이
   사라지는 사고를 막아준다.
   ========================================================= */
:root {
    /* 사이트 대표 포인트 색은 아래 --ui-slate* 4개가 유일한 원본(source of truth)이다.
       포인트색을 바꿀 때는 이 4줄 + --ui-slate-rgb 한 줄만 고치면 된다 — 다른 곳(--ia-accent*
       포함)은 전부 이 값을 var()로 참조만 하도록 통일함(2026-07-10). */
    --ui-slate: #6b4fd6;  --ui-slate-deep: #4d3aa0; --ui-slate-tint: #f0ecfc; --ui-slate-bd: #d4c7f4;
    --ui-slate-rgb: 107, 79, 214; /* rgba(var(--ui-slate-rgb), 0.x) 형태로 그림자/틴트에 사용 */

    /* 2026-07-10 6차: 아래 5개(teal/green/purple/amber/red)는 더 이상 독립된 색이 아니라
       --ui-slate 색조 하나에서 명암만 다르게 뽑아낸 파생값이다(color-mix). 이름/용도(뱃지·카드·
       버튼 구분색)는 그대로 유지하되, 이제 --ui-slate 한 줄만 바꾸면 이 5개도 전부 같은 색조로
       자동으로 따라온다 — "포인트색을 지정하면 사이트 전체 색이 그 색이 되게" 요청 반영.
       2026-07-10 8차 수정: 기본색(base)은 항상 black과만 섞는다 — white와 섞으면 파스텔처럼
       밝아져서, 흰 배경 위 작은 글자·아이콘이나 "배경색+흰 글자" 버튼(예: 후원/베타, 다운로드
       버튼)에서 대비가 무너져 잘 안 보이는 문제가 있었음(제보로 발견). tint/bd(옅은 배경/보더)만
       white와 섞어 밝게 유지 — base는 항상 --ui-slate만큼 어둡게, tint/bd만 옅게.

       ⚠ 이 5개는 "다섯 색"이 아니라 "한 색조의 다섯 밝기"다. 범례·상태표시처럼 서로 구별돼야
       하는 데이터 의미색에는 쓰면 안 된다 — 나란히 놓으면 바이올렛 여러 겹으로만 보인다.
       그런 용도는 각 페이지에서 --status-* 같은 별도 계열을 따로 정의해 쓴다
       (예: public/field-admin/styles.css). */
    --ui-teal:   color-mix(in srgb, var(--ui-slate) 96%, black);
    --ui-teal-tint: color-mix(in srgb, var(--ui-slate) 8%, white);
    --ui-teal-bd:   color-mix(in srgb, var(--ui-slate) 22%, white);

    --ui-green:  color-mix(in srgb, var(--ui-slate) 84%, black);
    --ui-green-tint: color-mix(in srgb, var(--ui-slate) 14%, white);
    --ui-green-bd:   color-mix(in srgb, var(--ui-slate) 30%, white);

    --ui-purple: color-mix(in srgb, var(--ui-slate) 72%, black);
    --ui-purple-tint: color-mix(in srgb, var(--ui-slate) 20%, white);
    --ui-purple-bd:   color-mix(in srgb, var(--ui-slate) 38%, white);

    --ui-amber:  color-mix(in srgb, var(--ui-slate) 58%, black);
    --ui-amber-tint: color-mix(in srgb, var(--ui-slate) 26%, white);
    --ui-amber-bd:   color-mix(in srgb, var(--ui-slate) 46%, white);

    --ui-red:    color-mix(in srgb, var(--ui-slate) 44%, black);
    --ui-red-tint: color-mix(in srgb, var(--ui-slate) 32%, white);
    --ui-red-bd:   color-mix(in srgb, var(--ui-slate) 54%, white);

    /* 통합분석(#section-analysis) 전용 별칭 — 값은 별도로 두지 않고 --ui-slate*를 그대로 참조.
       예전엔 여기가 --ui-slate와 동일한 값을 리터럴로 중복 정의하고 있어서 포인트색을 바꿔도
       통합분석 쪽만 안 바뀌는 문제가 있었음. */
    --ia-accent: var(--ui-slate);
    --ia-accent-deep: var(--ui-slate-deep);
    --ia-accent-text: var(--ui-slate-deep);
    --ia-tint: var(--ui-slate-tint);
    --ia-tint-border: var(--ui-slate-bd);
    --ia-hairline: #e5e9ef;
}