/* ═══════════════════════════════════════════════════════════════════
   tokens.css — 디자인 토큰 (monday.com 팔레트)

   기존 스타일시트가 이미 완전히 토큰화되어 있었기 때문에, 컴포넌트 구조를
   건드리지 않고 값만 갈아끼우는 것으로 대부분의 룩이 바뀐다.
   라이트를 기본으로 두고(monday 는 라이트 퍼스트) 다크는 파생 팔레트로 유지한다.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* 표면 */
  --bg:        #F6F7FB;
  --surface:   #FFFFFF;
  --surface-2: #F5F6F8;
  --surface-3: #EAEEF5;
  --surface-4: #DCE1EB;
  --border:    #D0D4E4;
  --border-2:  #C3C6D4;

  /* 글자 */
  --text:   #323338;
  --text-2: #676879;
  --text-3: #9699A6;

  /* 액센트 — monday 시그니처 */
  --primary:       #0073EA;
  --primary-hover: #0060B9;
  --primary-soft:  #E5F1FD;
  --positive:      #00C875;
  --positive-soft: #E3F8ED;
  --warning:       #FDAB3D;
  --warning-soft:  #FFF3E0;
  --negative:      #E2445C;
  --negative-soft: #FDECEF;
  --purple:        #A25DDC;
  --purple-soft:   #F3EAFB;
  --sky:           #579BFC;
  --sky-soft:      #E9F1FE;
  --pink:          #FF158A;
  --neutral:       #C4C4C4;

  /* 형태 */
  --r-sm: 4px;
  --r:    8px;
  --r-lg: 12px;
  --row-h: 40px;
  --sidebar-w: 244px;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.06);
  --shadow:    0 4px 12px rgba(0,0,0,.08);
  --shadow-lg: 0 12px 32px rgba(0,0,0,.14);
  --ring: 0 0 0 3px rgba(0,115,234,.22);

  color-scheme: light;
}

/* data-theme 은 index.html 의 인라인 스크립트가 페인트 전에 확정한다
   (저장된 선택 → 없으면 prefers-color-scheme). 그래서 여기서는 미디어 쿼리를
   따로 두지 않고 속성 하나만 본다 — 토글과 시스템 설정이 서로 싸우지 않는다. */
:root[data-theme="dark"] {
  --bg:        #14162B;
  --surface:   #1F2141;
  --surface-2: #272A4D;
  --surface-3: #30345C;
  --surface-4: #3B3F6B;
  --border:    #383B63;
  --border-2:  #4A4E7A;

  --text:   #E6E9F5;
  --text-2: #A9AEC7;
  --text-3: #767B9B;

  --primary:       #2683FF;
  --primary-hover: #4E9BFF;
  --primary-soft:  rgba(38,131,255,.16);
  --positive:      #00C875;
  --positive-soft: rgba(0,200,117,.16);
  --warning:       #FDAB3D;
  --warning-soft:  rgba(253,171,61,.16);
  --negative:      #E2445C;
  --negative-soft: rgba(226,68,92,.16);
  --purple:        #A25DDC;
  --purple-soft:   rgba(162,93,220,.16);
  --sky:           #579BFC;
  --sky-soft:      rgba(87,155,252,.16);
  --neutral:       #6B7089;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow:    0 4px 14px rgba(0,0,0,.45);
  --shadow-lg: 0 16px 40px rgba(0,0,0,.55);
  --ring: 0 0 0 3px rgba(38,131,255,.3);

  color-scheme: dark;
}