/* JariLab 디자인 토큰 — CI 정본.
 *
 * style.css 와 나눠 둔 이유: 이 파일은 **company-web 만의 것이 아니다.**
 * 서비스 웹·앱·문서가 같은 값을 써야 브랜드가 하나로 보인다. 다른 리포로 복사할 때
 * 이 파일만 가져가면 되도록 여기에는 색·치수만 두고 컴포넌트 규칙은 두지 않는다.
 *
 * 두 층으로 나눈다:
 *   1. 원시 팔레트 (--jl-*)  브랜드가 정한 색 그 자체. 여기 값은 함부로 안 바꾼다
 *   2. 역할        (--ink 등) 화면에서 무엇에 쓰는지
 * 컴포넌트는 **역할만** 참조한다. 원시 팔레트를 직접 쓰면 나중에 면을 갈 때 어긋난다.
 *
 * 바탕은 흰색 한 벌이다. 색이 도는 곳은 잉크·링크·마크 셋으로 제한한다.
 * 대비는 WCAG 2.1 상대휘도로 계산해서 골랐다. 값은 CI.md 의 표와 같다.
 */

:root {
  color-scheme: light;

  /* ── 1. 원시 팔레트 (Civic Blue) ─────────────────────────────────────── */
  --jl-ink: #173B57;          /* 흰 배경 11.67:1 */
  --jl-ink-soft: #4A6A82;     /* 흰 배경  5.71:1 */
  --jl-brand: #45AFC7;        /* 흰 배경  2.56:1 — ⛔ 텍스트 색이 아니다.
                                 로고 교집합·큰 면적에만 쓴다 */
  --jl-brand-deep: #17708A;   /* 흰 배경  5.64:1 / tint 5.14:1 — 링크·UI 는 이쪽 */
  --jl-tint: #EDF6F8;         /* 로고 판 배경. 화면 바탕으로는 쓰지 않는다 */
  --jl-paper: #F5F8FA;        /* 화면 바탕. 순백(#FFF)은 큰 면적에서 눈이 아프다 */
  --jl-line: #D5E5EB;
  --jl-white: #FFFFFF;

  /* ── 2. 역할 ─────────────────────────────────────────────────────────── */
  --ink: var(--jl-ink);
  --ink-soft: var(--jl-ink-soft);
  --line: var(--jl-line);
  /* 바탕을 순백에서 한 단계 내리고 카드를 흰색으로 올렸다. 큰 면적의 #FFF 는
     눈이 아프고, 이렇게 두면 흰 면이 바탕 위로 떠 보여 위계도 같이 생긴다.
     ink 대비 10.94:1 로 여유가 있고, 흰 카드와 바탕은 1.067 로 갈린다. */
  --bg: var(--jl-paper);
  --surface: var(--jl-white);  /* 카드·인용처럼 바탕 위로 띄우는 면 */
  --link: var(--jl-brand-deep);
  --brand: var(--jl-brand);    /* 마크·강조 도형 전용 */

  /* ── 치수 ────────────────────────────────────────────────────────────── */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;           /* 로고 타일의 곡률과 같은 계열 */

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2.5rem;

  --measure: 34rem;            /* 본문 한 줄 길이. 한국어는 이보다 길면 눈이 흐른다 */

  /* 로고 워드마크는 Geist 를 아웃라인으로 구워 뒀다. 본문까지 Geist 로 맞추려면
     폰트를 벤더링해야 하는데, 한글이 없어 어차피 두 벌이 된다. 지금은 시스템
     스택을 쓴다 — 라틴 글자꼴이 로고와 다르다는 점은 알고 받아들인 것이다. */
  --font-sans: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
               "Pretendard", "Noto Sans KR", sans-serif;
}

/* 다크 모드는 두지 않는다.
 *
 * 색을 두 벌 유지하면 화면에 도는 색이 배로 늘고, 그만큼 어긋날 자리도 늘어난다.
 * 실제로 /brand 의 자산 미리보기가 다크에서 통째로 사라지는 사고가 났다 —
 * 로고 판마다 전제하는 배경이 다른데 페이지 배경을 따라가게 뒀기 때문이다.
 * 회사 소개 사이트는 지면이 넷뿐이라 밝은 한 벌로 충분하다.
 *
 * ⚠️ 되살릴 때는 배경만 바꾸면 안 된다. 로고·아이콘의 반전판까지 같이 갈려야 한다.
 */