/* ANPARK Design Tokens — v3
   출처: Figma «ANPARK Design Tokens»(피그마 실측 전사, 2026-08-07-디자인토큰-v3-cc.md).
   v2.1(근태 앱 승계, 일렉트릭/울트라 바이올렛)을 교체 — 의미 토큰 "이름"은 그대로 두고
   "값"만 ANPARK 실제 브랜드 팔레트로 바꿨다(앱 코드 무수정 원칙, 요구사항 1).
   버튼·카드·아이콘 치수(--btn-*·--card-*·--icon-tile-*)와 타이포·간격(--fs-*·--space-*)은
   이 티켓 범위 밖 — 색만 다룬다. 레이아웃은 후속 티켓(2026-08-07-레이아웃-타이포·스페이스-cc.md).

   ─ 원칙(전역 CLAUDE.md ANPARK 디자인 시스템과 동일) ─
   · #ED1968 = 강조 전용(면·룰·대형만). 작은 강조 텍스트는 --text-accent(#B01352).
     제목·본문에 마젠타 쓰지 않음 — headline·ink은 별도.
   · 중립은 초록·크림(--moss·--tint·--surface-muted). 회색 중립 금지, 바탕은 흰색.
   · 상태색(positive/notice/negative)은 항상 라벨 병기 — 색만으로 의미 전달 금지.
   · 소형 텍스트(10~14px)는 4.5:1 이상 — 아래 실측표(design-tokens.test.js 및 티켓 검수
     보고 참조). **다크 모드 text-accent만 예외**: 피그마 표는 라이트·다크 동일값(#B01352)
     이지만 다크 서피스(#1C1A17) 위에서 2.53:1로 AA 미달 실측 — 같은 색상(h≈336°)에서
     명도만 올린 #EE5E98(5.53:1)로 다크 한정 대체(판단 기록, 요구사항 3).
   · --brand-fill: 기존 #C41050(흰 글자 5.89:1) 대신 새 --text-accent #B01352를 채택
     (흰 글자 6.86:1 — 더 넓은 여유 + 마젠타 계열 단일 출처, 판단 기록).
*/

:root{
  /* ── 램프: Secondary = moss 파생(2026-08-07 v3) ── */
  /* v2.1의 --sec-*(일렉트릭 블루)·--blush-*(brand 램프, 전부 미사용 확인 후 제거) 폐기.
     실사용처(app.css·app.js grep 확인)만 재정의: 50·pale·300·500·700. 100/200/400/600/
     800/900/deep은 미사용이라 제거(요구사항 1 — 제거 목록 보고). */
  --sec-50:#F4F6F3;    /* 옅은 moss 워시 — --blue-soft 배경(호버 등) */
  --sec-pale:#E3E9E2;  /* 헤어라인·연한 테두리 + 고정 다크 레일(--forest=--dark-surface) 위
                          라벨 텍스트 겸용 — 레일이 스킴 무관 고정 다크라 굳이 다크 재정의
                          안 함(단순화, 과설계 회피) */
  --sec-300: var(--border);  /* 알리아스 — border가 스킴별로 바뀌면 자동으로 따라온다 */
  --sec-500: var(--moss);    /* 알리아스 — moss가 곧 secondary 앵커 */
  --sec-700:#465841;   /* 진한 moss — 배지 텍스트(예: .tag-branch) 등 sec-pale과 짝 */

  /* ── 의미 토큰(앱이 쓰는 이름 — 유지) ── */
  --brand:         #ED1968;
  --brand-hover:   #FF0060;   /* brand 불변이라 유지 */
  --brand-fill:    #B01352;   /* 흰 글자 채움 전용(6.86:1) — text-accent와 단일 출처로 통일 */
  --brand-pale:    #FFF0F6;
  --text-accent:   #B01352;
  --headline:      #1B1C1E;
  --ink:           #343934;
  --muted:         #687068;   /* 흰 배경 5.11:1 */
  --moss:          #6F8B68;   /* 보조 강조. 흰 배경 대비는 본문 사용 안 함(면·아이콘 전용) */
  --tint:          #E8E2D4;
  --border:        #B8C9A9;
  --surface:       #FFFFFF;
  --surface-muted: #F7F4EE;
  --dark-surface:  #23352D;   /* 스킴 무관 고정 다크(레일 배경) — 라이트·다크 동일 */
  --ink-deep:      #131415;   /* 토스트·백드롭 전용 — headline보다 한 단 더 깊다 */
  --rule-strong:   #242124;   /* 스킴 무관 — 라이트·다크 동일 */

  /* 스킴 무관 고정 라이트(2026-08-07-주간회의-출력미리보기·인쇄-cc) — --dark-surface와 대칭.
     인쇄물은 다크 모드에서 열어도 항상 밝은 배경·검정 글자여야 해서, 스킴에 따라 값이
     뒤바뀌는 --surface/--ink 대신 이 고정 라이트 토큰을 쓴다(app.css는 원시 hex 금지 —
     design-tokens.test.js). */
  --print-surface: #FFFFFF;
  --print-ink:     #000000;
  --print-muted:   #333333;
  --print-line:    #999999;

  /* 상태색 — 라벨 병기 필수. */
  --positive: #2F6B4F;   /* 흰 6.29:1 */
  --notice:   #9A6700;   /* 흰 4.87:1 */
  --negative: #B42318;   /* 흰 6.57:1 */

  /* 부서 식별색 — 새 팔레트에 정의 없어 moss·brand 파생으로 재구성(재량, 요구사항 4).
     4px 룰 전용(면 채우기 금지) — 장식 용도라 AA 대비 요구 대상 아님. */
  --dept-1:#465841; --dept-2:#627b5c; --dept-3:#8ba384; --dept-4:#b1c2ad;
  --dept-5:#9c1c4b; --dept-6:#d22d6a; --dept-7:#da6c95; --dept-8:#e6a8bf;

  /* ── 형태 토큰 ── */
  --w-weight-display: 900;
  --w-track-display: -3px;
  --w-track-h2: -2px;
  --w-radius-pill: 999px;      /* Figma DS: pill = 9999 */
  --w-radius-card: 20px;       /* Cards.tsx: feature/profile 20 */
  --w-radius-inner: 14px;      /* Cards.tsx: kanban 14 */

  /* 버튼 — Buttons.tsx SIZE_MAP 실측 */
  --btn-pad-x-sm:14px; --btn-pad-y-sm:7px;  --btn-radius-sm:6px;  --btn-icon-sm:13px;
  --btn-pad-x-md:18px; --btn-pad-y-md:10px; --btn-radius-md:8px;  --btn-icon-md:15px;
  --btn-pad-x-lg:24px; --btn-pad-y-lg:13px; --btn-radius-lg:10px; --btn-icon-lg:16px;
  --btn-weight:700;
  --btn-track:-0.01em;
  --btn-ease:all .14s;

  /* 카드·아이콘 타일 — Cards.tsx 실측 */
  --card-radius:18px;          /* project/list 18 */
  --card-radius-sm:14px;
  --card-radius-lg:20px;
  --icon-tile:40px;            /* ListCard 40 / StatCard 44 */
  --icon-tile-lg:44px;
  --icon-tile-radius:10px;
  --icon-tile-radius-lg:12px;
  --icon-sw:1.8;               /* stroke-width */
  --elev-card:0 2px 16px rgba(0,0,0,.06);
  --elev-card-hover:0 20px 60px rgba(0,0,0,.12);
  --card-lift:-4px;

  /* 타이포 — ANPARK 모듈러 1.2(AI/ANPARK_Designlayout Guideline.md §2). 값은 기존과
     동일(승계 시점부터 이미 이 스케일과 일치) — 2026-08-07-레이아웃-타이포·스페이스-cc.md는
     app.css 적용 범위를 넓히는 티켓이라 여기서는 A4pt 주석만 병기. */
  --fs-display:2.5rem;   /* 40px · A4 31pt */
  --fs-h1:1.75rem;       /* 28px · A4 18pt */
  --fs-h2:1.375rem;      /* 22px · A4 15pt */
  --fs-h3:1.125rem;      /* 18px · A4 12.5pt */
  --fs-body:1.0rem;      /* 16px · A4 10.5pt */
  --fs-small:0.875rem;   /* 14px · A4 9.5pt */
  --fs-caption:0.75rem;  /* 12px · A4 8.5pt */

  /* 간격 — 같은 가이드 §4 웹 rem 그리드. --space-*(미사용 확인)를 --s1~8로 개명해
     티켓 표기와 맞춘다(요구사항 1 — 매핑표는 대조표 참조). */
  --s1:0.25rem; /* 4px · 문서 3pt */   --s2:0.5rem;  /* 8px · 문서 6pt */
  --s3:0.75rem; /* 12px · 문서 9pt */  --s4:1.0rem;  /* 16px · 문서 12pt */
  --s5:1.5rem;  /* 24px · 문서 18pt */ --s6:2.0rem;  /* 32px · 문서 24pt */
  --s7:3.0rem;  /* 48px · 문서 36pt */ --s8:4.0rem;  /* 64px · 문서 48pt */

  /* APFLOW 전용 추가분 — 근태 앱 v2.1 승계 범위 밖(재동기화 시 유실 주의).
     파일 주석 펜·핀 팔레트에만 쓴다. 이미지 위에 그리는 잉크색이라 UI 크롬과
     달리 라이트·다크 전환에 반응하지 않는 고정값(사용자가 "빨강"으로 그리면
     테마가 바뀌어도 계속 빨강이어야 한다). */
  --annot-yellow: #C9A100;
  --annot-purple: #7C3AED;
  --annot-white:  #FFFFFF;
}

@media (prefers-color-scheme: dark){
  :root{
    /* moss·brand는 라이트·다크 동일값(위 표) — 재정의 불필요. sec-300/500은 border/moss
       알리아스라 자동으로 따라온다. sec-pale/700은 의도적으로 스킴 무관(위 주석). */
    --sec-50:#252F23;

    --brand-pale:#2A0016;
    /* text-accent만 다크에서 원 피그마값(#B01352, 2.53:1)이 AA 미달이라 예외 대체 —
       위 헤더 주석 참조. brand-fill은 흰 글자 대비라 스킴 무관, 재정의 불필요. */
    --text-accent:#EE5E98;
    --headline:#F4EFF1;
    --ink:#E8E4E0;
    --muted:#9AA39A;            /* #1C1A17 위 6.68:1 */
    --tint:#26241F;
    --border:#3C463A;
    --surface:#1C1A17;
    --surface-muted:#232019;
    --ink-deep:#100F0D;         /* surface보다 한 단 더 깊다 */

    --positive:#5FBF93; --notice:#E0A53A; --negative:#E8776B;

    --dept-1:#5c914f; --dept-2:#78ae6b; --dept-3:#99c28f; --dept-4:#bdd7b6;
    --dept-5:#bd0f50; --dept-6:#e61966; --dept-7:#e7558c; --dept-8:#ea86ab;

    --elev-card:0 2px 16px rgba(0,0,0,.45);
    --elev-card-hover:0 20px 60px rgba(0,0,0,.6);
  }
}

/* 모바일 축소(2026-08-07-레이아웃-타이포·스페이스-cc.md 요구사항 5) — 토큰 자체를 한 단
   낮춰 재정의한다. app.css가 개별 셀렉터마다 모바일 오버라이드를 반복하지 않아도
   var(--fs-h1) 등을 쓰는 곳은 전부 자동으로 따라온다("개별 오버라이드 남발 금지"). */
@media (max-width: 850px){
  :root{
    --fs-display: var(--fs-h1);
    --fs-h1:      var(--fs-h2);
    --fs-h2:      var(--fs-h3);
    --fs-h3:      var(--fs-body);
    /* body·small·caption은 이미 최소 판독 크기라 더 낮추지 않는다. */
    --s8: var(--s6);
    --s7: var(--s5);
    --s6: var(--s4); /* 페이지 여백 s6→s4(티켓 명시 예시) */
    --s5: var(--s3);
  }
}