/* _tokens.css — FLEX POMO 컬러 팔레트 (커스텀 "focus")
   라이트 "warm"(기본, 따뜻한 종이빛) · 다크 "night"(집중 디밍).
   모드 액센트는 body[data-mode]로 전환: 집중=토마토 / 짧은휴식=틸 / 긴휴식=블루. */

:root,
:root[data-theme="warm"] {
  --bg: #FBF6EF;
  --bg-grad: radial-gradient(120% 90% at 50% -10%, #FFFDFA 0%, #FBF6EF 55%, #F6EEE3 100%);
  --surface: #FFFFFF;
  --surface-2: #F5EEE3;
  --ink: #2B2420;
  --ink-soft: #6C6058;
  --ink-faint: #9C9088;
  --border: #ECE1D3;
  --border-strong: #DFD0BC;
  --track: #ECE0D0;
  --shadow-lg: 20px 20px 50px rgba(183,161,133,.30), -16px -16px 44px rgba(255,255,255,.92);
  --shadow-sm: 8px 8px 20px rgba(183,161,133,.24), -6px -6px 16px rgba(255,255,255,.9);
  --shadow-inset: inset 5px 5px 12px rgba(183,161,133,.26), inset -5px -5px 12px rgba(255,255,255,.86);

  --focus: #E8543F;
  --focus-2: #F0805F;
  --short: #14B8A6;
  --short-2: #2DD4BF;
  --long: #3B82F6;
  --long-2: #60A5FA;

  --accent: var(--focus);
  --accent-2: var(--focus-2);
  --accent-ink: #FFFFFF;
  --accent-soft: rgba(232,84,63,.12);
}

:root[data-theme="night"] {
  --bg: #17130F;
  --bg-grad: radial-gradient(120% 90% at 50% -10%, #221B15 0%, #17130F 60%, #100C09 100%);
  --surface: #211A15;
  --surface-2: #2A211B;
  --ink: #F4ECE2;
  --ink-soft: #B7A99C;
  --ink-faint: #857a6f;
  --border: #34291F;
  --border-strong: #43352A;
  --track: #2E251D;
  --shadow-lg: 18px 18px 44px rgba(0,0,0,.55), -14px -14px 40px rgba(255,255,255,.03);
  --shadow-sm: 7px 7px 18px rgba(0,0,0,.5), -5px -5px 14px rgba(255,255,255,.03);
  --shadow-inset: inset 5px 5px 12px rgba(0,0,0,.5), inset -5px -5px 12px rgba(255,255,255,.03);

  --focus: #F4664F;
  --focus-2: #F98A6E;
  --short: #2DD4BF;
  --short-2: #5EEAD4;
  --long: #60A5FA;
  --long-2: #93C5FD;

  --accent: var(--focus);
  --accent-2: var(--focus-2);
  --accent-ink: #17130F;
  --accent-soft: rgba(244,102,79,.16);
}

/* 모드별 액센트 스위칭 (data-mode 는 body 에 JS 로 설정) */
body[data-mode="short"] { --accent: var(--short); --accent-2: var(--short-2); --accent-soft: color-mix(in srgb, var(--short) 14%, transparent); }
body[data-mode="long"]  { --accent: var(--long);  --accent-2: var(--long-2);  --accent-soft: color-mix(in srgb, var(--long) 14%, transparent); }