/* 화면 공통 토큰 — 이 프로젝트의 색·글꼴·판형 한 벌.
 *
 * **여기 있는 값을 다른 파일에 다시 적지 않는다.** 명함 발급 화면(bizcards.css)과 홈
 * 화면(home.css)이 같은 물건(어두운 베드 위의 흰 명함)을 그리므로, 값이 갈리면 한쪽만
 * 손댔을 때 소리 없이 어긋난다 — 이 프로젝트가 경계선 세기(0.10/0.18/0.22)에서 실제로
 * 겪은 일이다. 그래서 두 화면이 함께 읽는 파일 하나로 둔다.
 *
 * 여기 두는 것 = **두 화면이 같이 쓰는 것**. 한 화면에서만 뜻이 있는 값(폼 칼럼 폭,
 * 헤더 높이, 미리보기 판 여백 같은 것)은 그 화면의 CSS 에 남긴다.
 *
 * 읽는 순서: tokens.css → 화면별 CSS. 글꼴 선언도 여기 있으므로 순서가 뒤집히면 첫
 * 페인트가 폴백 글꼴로 나간다.
 */

@font-face {
    font-family: 'Wanted Sans Variable';
    src: url('../fonts/WantedSansVariable.woff2') format('woff2-variations');
    font-weight: 400 700;
    font-display: swap;
}

:root {
    --ink: #1A1A1A;
    --paper: #FFFFFF;
    --press: #191A1C;
    --accent: #ED6E00;
    --muted: #727171;
    --rule: #D8D8D5;

    /* ── 옅은 면 (머리 줄·구역 바탕) ────────────────────────────────
     *
     * **중립 회색이다** — R·G·B 가 같다. 한때 관리자 표의 머리 줄이 `#F1F1EE` 였는데,
     * 파랑이 3 낮아 큰 면적으로 깔리면 **누렇게** 보였다(실측 지적). `--ink`(#1A1A1A)·
     * `--paper`(#FFFFFF)가 모두 중립이므로 옅은 면도 중립인 쪽이 사이트와 맞는다.
     * (`--rule` 만 살짝 따뜻한데, 그건 1px 선이라 면적이 없어 눈에 띄지 않는다.) */
    --wash: #F2F2F2;

    /* ── 상태의 색 (스펙 10.10 · 11.3) ──────────────────────────────
     *
     * **한때 이 셋은 `dashboard.css` 의 `:root` 에 있었다.** 그 파일을 읽지 않는 화면은
     * 값을 못 받으므로, 관리자 표가 같은 상태를 말하려면 자기 팔레트를 새로 지어야 했다 —
     * 실제로 그렇게 갈렸다(대시보드는 주황 계단, 관리자 표는 다른 계열). 같은 상태가
     * 화면마다 다른 색이면 «같은 것» 이라는 사실이 모양에서 사라진다.
     *
     * 그래서 여기로 올린다. 이 파일은 모든 화면이 **가장 먼저** 읽는다.
     *
     * 진행 중 셋은 **같은 색상(주황)을 옅은 쪽에서 진한 쪽으로** 쓴다. 색상을 바꾸지 않는
     * 이유: 색이 다르면 «종류가 다르다» 로 읽히는데, 셋은 한 흐름의 세 지점이지 서로 다른
     * 것이 아니다. 끝난 둘(수령 완료·반려됨)은 흐름 밖이라 계열을 달리한다.
     *
     * **색은 한 벌이다** — 대시보드의 상태 점과 관리자 화면(「처리」 배지의 점·흐름 띠의 점·
     * 처리 메뉴의 번호)이 **아래 `--stage-*` 를 그대로** 읽는다. 한때 관리자 쪽은 이 계단을
     * «흰 바탕에 미리 섞은» 면/글자/테두리 세 벌로 따로 지었는데, 그 값은 대시보드와 색도
     * 농도도 달랐다(옅은 살구 면 + 채도 높은 주황 테두리 = 형광처럼 보였고, 흐름 띠의 점은
     * 글자색 `#8F4200` 을 받아 세 단계가 전부 같은 갈색이었다 — 실측 지적). 값을 두 벌로
     * 두면 «같게 맞췄다» 는 사실이 다음 수정에서 조용히 깨진다. */
    --stopped: #C42C2C;
    --done: #2E7D5B;

    /* 진행 중 셋의 농도 — 강조색(`--accent`)을 이만큼만 칠한다. */
    --tone-received: 0.4;
    --tone-approved: 0.68;
    --tone-printing: 1;

    /* 상태의 색 — 대시보드 점 = 관리자 점. `--accent` 를 `--tone-*` 만큼 **흰 종이에 섞은
     * 불투명한 색**이다 — 흰 바탕 위에서 알파 `--tone-*` 로 칠한 것과 같은 픽셀이다.
     *
     * ⚠️ **반투명(`… transparent`)으로 두지 않는다.** 한때 그랬더니 흐름 띠에서 점 뒤를 지나는
     * 잇는 선이 옅은 점(접수됨 0.4 · 승인됨 0.68)을 **비쳐 보였다**(실측 지적: «비친다»).
     * 흰 바탕에서는 둘이 같은 색이므로, 섞어 두면 잃는 것이 없다. */
    --stage-received: color-mix(in srgb, var(--accent) calc(var(--tone-received) * 100%), var(--paper));
    --stage-approved: color-mix(in srgb, var(--accent) calc(var(--tone-approved) * 100%), var(--paper));
    --stage-printing: color-mix(in srgb, var(--accent) calc(var(--tone-printing) * 100%), var(--paper));
    --stage-delivered: var(--done);
    --stage-rejected: var(--stopped);

    /* ── 두 화면(대시보드 · 관리자 화면)이 함께 쓰는 컨트롤 토큰 ─────────────
     *
     * 한때 같은 것(포커스 테 · 표 머리 줄 · 고른 탭의 밑줄 · 건수 알약)을 두 화면이 각자 적었고,
     * 그 사이 값이 갈렸다(포커스 테가 한 화면 안에서 주황과 검정으로 섞였다). 여기 한 벌을
     * 두고 두 화면이 읽는다. */

    /* 키보드 포커스 테. **어디서나 이 하나다.** */
    --focus-ring: var(--accent);
    --focus-width: 2px;

    /* 표 머리 줄 — 옅은 중립 면 · 진한 글자 · 한 단 작은 굵은 글씨. */
    --head-face: var(--wash);
    --head-ink: var(--ink);
    --head-size: 12px;
    --head-weight: 600;

    /* 고른 탭의 밑줄과, 탭·흐름 띠의 건수 알약(고른 쪽 / 안 고른 쪽). */
    --tab-rule-on: var(--ink);
    --count-face-on: var(--ink);
    --count-ink-on: #FFFFFF;
    --count-face-off: rgba(0, 0, 0, 0.06);

    /* 구역 제목 옆의 건수(「진행 중 1건」·「인쇄 신청 관리 4건」). 주황이 아니다 — 주황은 단계의
       색이라, 건수까지 주황이면 «어느 단계인가» 를 말하는 색이 흔해진다(4단계 #11). */
    --section-count-size: 14px;
    --section-count-weight: 500;
    --section-count-ink: var(--ink);

    /* 명함 썸네일(눌러서 크게 보기) — **납작한 종이 + 테두리**, 올리거나 포커스가 닿으면 아래에
       「자세히」 띠가 덮인다(4단계 #17 — 한때 대시보드는 그림자가 지고 떠오르는 종이였다). */
    --thumb-edge: var(--rule);
    --thumb-hint-face: rgba(26, 26, 26, 0.78);
    --thumb-hint-ink: #FFFFFF;

    --sans: 'Wanted Sans Variable', system-ui, -apple-system, sans-serif;
    --mono: ui-monospace, SFMono-Regular, Menlo, monospace;

    /* 명함 판형. 미리보기 큰 카드·썸네일·확인 모달·홈의 카드 더미가 전부 이 비율을 쓴다 —
       판형이 바뀌면 고칠 곳이 여기 하나다. */
    --card-ratio: 266.457 / 153.071;

    /* 어두운 면 위 "누를 수 있는 네모" 의 면·테두리. 발급 화면의 체크박스·크기 보정·
       보정 판 기본 버튼과 홈의 보조 버튼이 같은 값을 쓴다. */
    --ctl-face: rgba(255, 255, 255, 0.06);
    --ctl-edge: rgba(255, 255, 255, 0.28);
    --ctl-edge-hover: rgba(255, 255, 255, 0.5);

    /* 어두운 면 위의 «경계선» 하나. 헤더 아래 선·컨트롤 줄 윗선·썸네일 윤곽·툴팁 테두리가
       같은 값을 쓴다. 세기를 바꿀 일이 있으면 여기 한 곳만 바꾼다. */
    --bed-edge: rgba(255, 255, 255, 0.18);
}