/* Shared design tokens for the workspace app and the platform admin console.
 *
 * These were previously declared twice -- identically, by value -- in
 * css/base.css and admin.css, so a palette change had to be made in two places
 * to keep the two surfaces from drifting apart. Surface-specific tokens (status
 * colours, admin chrome offsets) stay in their own stylesheet.
 *
 * The shell and panel tokens below were added when the console was rebuilt
 * around a dark left rail: both surfaces draw the same rail and the same card,
 * so those values have to live in one place for the same reason the palette
 * does. `css/dashboard.css` owns the workspace rules that consume them and
 * `admin.css` owns the admin ones.
 *
 * The vertical UIs (frontend/verticals/) deliberately declare their own palette
 * with different values and do not load this file. */

/* Self-hosted Pretendard (SIL OFL 1.1, frontend/assets/fonts/PretendardVariable.LICENSE.txt).
 * Every surface's font stack lists "Pretendard" first but nothing used to serve
 * that name, so it never matched and browsers fell through per-glyph -- Latin/
 * digits landing on -apple-system/BlinkMacSystemFont while adjacent Hangul
 * landed on Malgun Gothic/Apple SD Gothic Neo, visibly mismatched wherever the
 * two mix (scores, model names, dates). This @font-face makes the first name in
 * the stack actually resolve, so both scripts render from one face everywhere.
 * font-weight is a range because callers use in-between values (650/750/850)
 * that only a variable font -- not a fixed static weight -- can render exactly. */
@font-face {
  font-family: 'Pretendard';
  src: url('/assets/fonts/PretendardVariable.woff2') format('woff2-variations'),
       url('/assets/fonts/PretendardVariable.woff2') format('woff2');
  font-weight: 45 920;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #f5f7f7;
  --surface: #ffffff;
  --surface-strong: #ffffff;
  --surface-soft: #f2f8f7;
  --surface-muted: #f3f6f6;
  --line: #d9e2e2;
  --line-strong: #bdcaca;
  --text: #1f2933;
  --muted: #5f6b6b;
  --muted-strong: #374747;
  --brand: #0abda3;
  --brand-dark: #06705f;
  --brand-soft: #e3f7f4;
  --shadow: 0 18px 48px rgba(31, 41, 51, .1);

  /* PRISM 다섯 측정 영역의 키 색. 제품 이름 그대로 프리즘이 흰빛을 가르는 순서다
   * -- 파장 순으로 빨(P) · 주(R) · 초(I) · 파(S) · 보(M). 한동안 이 자리는 랜딩
   * 카드(.al) 안에만 있는 청록 다섯 단계(#0e9fc0 → #67a53c)였고, 그래서 두 가지가
   * 동시에 깨져 있었다: 5px 점으로 줄이면 다섯이 같은 초록으로 보여 색이 영역을
   * 가리키지 못했고, 랜딩 밖(리포트 차트·워크스페이스)에서는 아예 쓸 수 없어 화면마다
   * 자기 색을 새로 골랐다.
   *
   * 키 색은 시각화(막대·광선·점)에 쓰는 명도다. 같은 값을 작은 글자에 쓰면
   * 흰 바탕 대비가 2.11~4.43:1에 머물러 라벨이 흐려진다. 그래서 차트 팔레트는
   * 유지하고, 글자는 아래 --prism-*-ink를 쓴다. ink 다섯 색은 흰 바탕에서
   * 5.47~5.66:1로 작은 텍스트의 WCAG AA 기준을 넘고 시각적 무게도 비슷하다.
   *
   * 색은 두 번째 끈이지 유일한 끈이 아니다. 빨·초는 색각 이상에서 겹치므로 이 색을
   * 쓰는 자리에는 영역 이름이 반드시 함께 선다(frontend/js/prism.js). */
  --prism-prominence: #E56767;
  --prism-relevance: #EFA24B;
  --prism-integrity: #46A879;
  --prism-signature: #4D8FCB;
  --prism-merit: #8069C5;
  --prism-prominence-ink: #B54040;
  --prism-relevance-ink: #9A5900;
  --prism-integrity-ink: #257650;
  --prism-signature-ink: #2D6B9E;
  --prism-merit-ink: #755AAF;

  /* Navigation rail */
  --rail: 244px;
  /* Lifted from #16211f, which sat at L* 12 -- close enough to black that the
   * rail read as a hole in the page rather than a surface, and every hover and
   * selected state had to be built from white overlays on top of nothing. This
   * is the ceiling, not a midpoint: past roughly L* 20 the selected row's
   * rgba(10,189,163,.32) wash stops separating from the background. --rail-line
   * moves with it to hold the same ~1.36:1 hairline it had before. */
  --rail-bg: #23312e;
  --rail-line: #364643;
  /* Raising the background cost the text what it gave the surface: #a9b8b5 was
   * 8.03:1 on #16211f and is only 6.59:1 here, so label and icon both drifted
   * toward the rail they sit on. The hairline above was re-checked against the
   * lift and these were not. 9.40:1 reads as near-white at 15px without being
   * #fff, which is the hover and active colour -- idle text there would leave
   * those states with no brightening left to do. */
  --rail-text: #ccdad7;
  /* Secondary rail text -- section headings, taglines, the account subtitle.
   * These were three hand-written greys (#7d918d, #7f918d, #8fa19d) that had
   * drifted apart by a couple of points each and all had to be re-checked when
   * the background moved, so they are one value now. Deliberately a step below
   * --rail-text and no further: at 11px it carries the small-text load, so it
   * tracks the value above rather than holding its own number -- 7.83:1. */
  --rail-text-dim: #b9c8c5;
  /* The rail's left edge is built from these two, not from hand-added numbers:
   * every row paints its background across --rail-gutter and starts its content
   * --rail-inset further in, so logo, icons and labels share one edge. Rows that
   * carry a 1px border subtract it via calc() instead of hardcoding 10px --
   * that arithmetic was previously copied into three files and would drift
   * silently the moment a border or a gutter changed. */
  --rail-gutter: 14px;
  --rail-inset: 11px;
  /* Sized against the 15px/650 rail label, not against the 24-unit viewBox: at
   * 18px the outlines resolved to roughly a 1.3px stroke and read a full step
   * lighter than the text they label. */
  --rail-icon: 20px;
  /* 레일 안의 행 -- 메뉴 항목, 브랜드/워크스페이스 토글, 콘솔 간 이동 링크.
   * 아래 카드 계단과 따로 두는 이유는 레일이 다른 표면이기 때문이다: 어두운 크롬에
   * 244px 한 줄로 서고, 상자가 상자를 담지 않으므로 깊이를 말할 반경이 필요 없다.
   * 값이 여기 있는 이유는 계단 쪽과 같다 -- base.css · dashboard.css · guide.css ·
   * admin.css 네 파일이 같은 10px을 각자 적고 있었고, 실제로 두 토글이 10px과 8px로
   * 갈라져 나란히 서 있었다. */
  --rail-radius: 10px;

  /* 콘솔 본문 컬럼의 상한. 워크스페이스(#content)와 어드민(#app)이 같은 1420px을
   * 각자 적고 있었다 -- 초광폭에서 남는 폭은 margin-inline: auto로 좌우에 나눈다. */
  --content-max: 1420px;

  /* Panels and metric deltas */
  /* 네 단계뿐인 반경 계단. 화면에서 상자는 상자 안에 들어가고, 반경은 그 깊이를
   * 말하는 유일한 신호다 -- 패널과 그 안의 카드가 같은 8px이면 둘은 한 겹으로
   * 읽히고, 카드 안의 줄까지 같으면 표가 카드처럼 보인다.
   *
   * 이 값들이 토큰이 된 이유는 예쁜 숫자가 필요해서가 아니라, 같은 층위가 파일마다
   * 다른 숫자로 손으로 적혀 있었기 때문이다. 워크스페이스의 카드는 8px과 10px로,
   * 어드민의 카드는 8px로 갈라져 있었고 -- 두 콘솔이 같은 카드를 그린다고 주석에
   * 써 두고도 실제로는 서로 다른 물건을 그렸다. 층위를 옮길 일이 생기면 여기서
   * 옮기고, 규칙에서 벗어나야 할 자리에는 왜 벗어나는지 함께 적는다.
   *
   * 간격이 2-3-3px로 고르지 않은 것도 의도다. 패널과 그 바로 안의 카드는 붙어
   * 있으니 2px이면 층이 갈리고, 그보다 벌리면 카드가 패널과 다른 재질처럼 보인다.
   * 반대로 줄과 컨트롤은 상자 자체가 작아서 2px 차이가 눈에 남지 않으므로 3px씩
   * 벌린다. 알약(999px)과 원(50%)은 이 계단 밖의 형태라 토큰을 쓰지 않는다. */
  --panel-radius: 16px;
  /* 패널 안의 카드 -- 지표 타일, 상세 카드, 폼 카드. */
  --card-radius: 14px;
  /* 카드 안의 줄과 상자 -- 목록 행, 요약 띠, 빈 상태, 표 테두리. */
  --row-radius: 11px;
  /* 손으로 조작하는 것 -- 입력칸, 버튼, 표 안의 작은 입력. */
  --control-radius: 8px;
  --panel-shadow: 0 8px 24px rgba(31, 41, 51, .05);
  --pos: #12876f;
  --neg: #c2410c;
  /* 좋고 나쁨이 아니라 "여기서 측정 기준이 바뀌었다"를 가리키는 색.
   * --neg를 빌려 쓰면 기점 표시가 나쁜 결과처럼 읽힌다. */
  --notice: #b8791f;

  /* Typography scale (docs/plans/ROADMAP.md §2.1, U-1). CSS 전체에 font-size
   * 선언이 약 550개, 서로 다른 크기가 31종(9px~39px, 반픽셀 5종 포함)이었고
   * 그중 어떤 것도 base.css:11의 16px/1.5 기준과 연결되어 있지 않았다 --
   * 규칙마다 눈대중으로 12px 안팎을 다시 적은 흔적이다. 이 6단계가 그 전부를
   * 흡수하는 유일한 축이다: 새 font-size는 여기서 고르고, px를 다시 손으로
   * 적지 않는다.
   *
   * 역할 기준(§2.1 U-3): 12(fs-1)는 타임스탬프·배지·각주 같은 보조 정보
   * 전용이다. 문단·목록 같은 실제 읽을 본문은 14(fs-3), 지표 라벨은
   * 13(fs-2)을 쓴다. 16(fs-4)은 base.css의 본문 기준선, 18(fs-5)과
   * 24(fs-6)은 소제목·강조 숫자용이다. 31종 중 24px를 넘던 값(28~39px 대형
   * 히어로 숫자 일부 포함)도 이 계단의 최상단(fs-6)으로 모은다 -- 그 이상의
   * 단계가 필요해 보이는 자리가 있다면 새 토큰을 추가할 이유이지, px를 다시
   * 손으로 적을 이유는 아니다. */
  --fs-1: 12px;
  --fs-2: 13px;
  --fs-3: 14px;
  --fs-4: 16px;
  --fs-5: 18px;
  --fs-6: 24px;
  /* U-11 산출물: overview의 지표 4개 중 AI 노출률 하나만 주인공으로 세우기로
   * 하면서 생긴 예외 한 단계다. 일반 지표 카드(.metric-value)가 이미 fs-6을
   * 쓰고 있어, 주인공을 정말 다르게 보이게 하려면 그 위 단계가 필요했다 --
   * 위 주석이 말한 "그 이상이 필요한 자리"가 이거다. 화면 전체에서 딱 하나,
   * overview 히어로 숫자에만 쓴다. */
  --fs-hero: 34px;

  /* Line-height scale. 값 자체는 기존 코드에서 가장 많이 쓰이던 세 군집
   * (1.2 안팎 / 1.45~1.5 / 1.6~1.7)을 그대로 이름 붙인 것이다 -- 새 규칙을
   * 쓸 때 이 세 값 중 하나를 고르되, 기존 line-height 선언 전부를 여기로
   * 옮기는 일은 이번 작업 범위가 아니다(문제로 지목된 것은 font-size 쪽
   * 혼란이었다). */
  --lh-tight: 1.2;
  --lh-base: 1.5;
  --lh-loose: 1.7;
}