/* ANPARK Design Tokens — v2.1
   출처: Figma «Change Anpark team token color» / src/app/ds/tokens.ts · PALETTES[]
     · 화이트 버전 = 01 「일렉트릭」  (순백 × #0033FF, ink #050010, muted #6020A0)
     · 다크  버전 = 04 「울트라 바이올렛」 (#08000F × #9B5CFF, ink #F0EAFF)
   버튼·카드·아이콘 치수는 같은 파일의 ds/Buttons.tsx · ds/Cards.tsx 실측값.

   ─ 이번 판에서 바뀐 구조 ─
   보조 램프의 이름을 --cobalt-* → --sec-* 로 옮겼다.
   이유: 라이트는 파랑(일렉트릭), 다크는 보라(울트라)다. 하나의 색이름으로 두 색을
   가리키면 변수명이 거짓말을 한다. --cobalt-* 는 **한시적 별칭**으로 남겨 두었으니
   화면 코드는 --sec-* 로 옮겨 간 뒤 별칭 블록을 지운다.

   ─ 원칙 ─
   · #ED1968 = 강조 전용(면·룰·대형 텍스트). 소형 텍스트·본문 금지.
   · 흰 글자를 얹는 채움 버튼은 --brand-fill 을 쓴다. #ED1968 은 흰 글자 대비가
     4.24:1 로 14px 라벨에서 AA(4.5:1)에 못 미친다. #C41050 은 5.89:1 이다.
   · 상태색(positive/notice/negative)은 팔레트에서 가져오지 않는다.
     팔레트의 secondary 가 파랑·보라라서 「정상」과 「정보·링크」가 구분되지 않는다.
     근거: 원본 Figma 파일 자신도 Cards.tsx 의 상승 추세에 팔레트 밖 초록(#22C55E)을 썼다.
   · 소형 텍스트(10~14px)에 쓰는 색은 4.5:1 을 넘긴다. 다크의 muted 는 원본 #8860CC 가
     서피스(#12001E) 위에서 4.41:1 이라 미달 — #A98BE0(7.15:1)로 올렸다.
*/

:root{
  /* ── 램프: Blush(brand) — 두 버전 공통 ── */
  --blush-50:#FFF0F6; --blush-100:#FFD9E8; --blush-200:#FFB0CE; --blush-300:#FF80B8;
  --blush-400:#F24B8C; --blush-500:#ED1968; --blush-600:#C41050; --blush-700:#960B3C;
  --blush-800:#670729; --blush-900:#3A0317;

  /* ── 램프: Secondary = 일렉트릭 블루(#0033FF) ── */
  --sec-50:#EBF0FF; --sec-100:#D6E0FF; --sec-200:#99B3FF; --sec-300:#6685FF;
  --sec-400:#3359FF; --sec-500:#0033FF; --sec-600:#0029CC; --sec-700:#001F99;
  --sec-800:#001466; --sec-900:#000A33;
  --sec-pale:#C9D6FF;   /* 헤어라인(100~200 사이) */
  --sec-deep:#001466;   /* 다크 밴드 기준색 */

  /* ── 의미 토큰(앱이 쓰는 이름 — 유지) ── */
  --brand:         #ED1968;
  --brand-hover:   #FF0060;   /* 일렉트릭의 primaryHover */
  --brand-fill:    #C41050;   /* 흰 글자를 얹는 채움면 전용(5.89:1) */
  --brand-pale:    #FFF0F6;
  --text-accent:   #C41050;
  --headline:      #050010;
  --ink:           #10002A;   /* 본문 잉크 — 보라 기운의 먹 */
  --muted:         #6020A0;   /* 일렉트릭의 muted. 흰 배경 9.5:1 */
  --moss:          #0033FF;   /* 보조 강조 = secondary. 흰 배경 7.2:1 */
  --tint:          #D6E0FF;
  --border:        #C9D6FF;
  --surface:       #FFFFFF;   /* 캔버스 완전 순백 */
  --surface-muted: #EBF0FF;
  --dark-surface:  #001466;
  --ink-deep:      #050010;
  --rule-strong:   #0033FF;

  /* 상태색 — 팔레트 미채택(브랜드군 충돌 회피). 라벨 병기 필수. */
  --positive: #0E7A55;   /* 흰 5.4:1 */
  --notice:   #B45309;   /* 흰 5.0:1 */
  --negative: #B42318;

  /* 부서 식별색 — 일렉트릭 6 + 블러시 2. 4px 룰 전용(면 채우기 금지). */
  --dept-1:#0033FF; --dept-2:#0029CC; --dept-3:#3359FF; --dept-4:#6685FF;
  --dept-5:#001F99; --dept-6:#99B3FF; --dept-7:#C41050; --dept-8:#F24B8C;

  /* ── 형태 토큰 ── */
  --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(5,0,16,.06);
  --elev-card-hover:0 20px 60px rgba(5,0,16,.12);
  --card-lift:-4px;

  /* 타이포·간격 */
  --fs-display:2.5rem; --fs-h1:1.75rem; --fs-h2:1.375rem; --fs-h3:1.125rem;
  --fs-body:1.0rem; --fs-small:0.875rem; --fs-caption:0.75rem;
  --space-1:0.25rem; --space-2:0.5rem; --space-3:0.75rem; --space-4:1.0rem;
  --space-5:1.5rem; --space-6:2.0rem; --space-7:3.0rem; --space-8:4.0rem;

  /* ── 한시적 별칭 — 화면 코드가 --sec-* 로 이동하면 이 블록을 삭제한다 ── */
  --cobalt-50:var(--sec-50);   --cobalt-100:var(--sec-100); --cobalt-200:var(--sec-200);
  --cobalt-300:var(--sec-300); --cobalt-400:var(--sec-400); --cobalt-500:var(--sec-500);
  --cobalt-600:var(--sec-600); --cobalt-700:var(--sec-700); --cobalt-800:var(--sec-800);
  --cobalt-900:var(--sec-900);
  --cobalt-pale:var(--sec-pale); --cobalt-deep:var(--sec-deep);
}

@media (prefers-color-scheme: dark){
  :root{
    /* ── 램프: Secondary = 울트라 바이올렛(#9B5CFF) ── */
    --sec-50:#F0EAFF; --sec-100:#DCC9FF; --sec-200:#C8B4F0; --sec-300:#B892FF;
    --sec-400:#9B5CFF; --sec-500:#8348E0; --sec-600:#6B32C0; --sec-700:#4A1E8A;
    --sec-800:#200040; --sec-900:#12001E;
    --sec-pale:#33125E;
    --sec-deep:#200040;

    --brand:#ED1968; --brand-hover:#FF0060; --brand-fill:#C41050; --brand-pale:#2A0016;
    --text-accent:#FF80B3;
    --headline:#F0EAFF;
    --ink:#C8B4F0;              /* 울트라의 body */
    --muted:#A98BE0;            /* 원본 #8860CC 는 4.41:1 로 미달 → 7.15:1 로 올림 */
    --moss:#B892FF;
    --tint:#200040;
    --border:#33125E;
    --surface:#12001E;          /* 울트라의 surface */
    --surface-muted:#200040;    /* canvasMid */
    --dark-surface:#200040;
    --ink-deep:#08000F;         /* canvas — 가장 깊은 면 */
    --rule-strong:#9B5CFF;

    --positive:#4FD39B; --notice:#F0B429; --negative:#FF8A80;

    --dept-1:#9B5CFF; --dept-2:#B892FF; --dept-3:#8348E0; --dept-4:#D4B8FF;
    --dept-5:#6B32C0; --dept-6:#DCC9FF; --dept-7:#FF80B3; --dept-8:#F87DB0;

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